Jak powinien wyglądać pełny kod programu karuzeli slajdera poniżej ?

Odpowiedz Nowy wątek
2019-04-11 13:14
0

Nada tegol nie rozumiem. Mogę prosić o podanie kodu, który jak wkleję do pliku html będzie pokazywał automatyczną karuzelę zdjęć jak na stronie www: https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html

Zależy mi na pełnym kodzie do takiego slajdera (karuzeli) zdjęć, abym mógł po zapisaniu w pliku html zobaczyć efekt jak na stronie autoplay.html

Dziękuję za pomoc i szczegółowe odpowiedzi.

Pozostało 580 znaków

2019-04-12 22:29
0

Zobaczyłem co w tych plikach z rozszerzeniami js. Tam jest tragedia, chyba cały sztab ludzi to pisał. Dajcie jakiś najprostszy przykład z tymi karuzelami, aby to działało od początku do końca. Pełny kod.

Pozostało 580 znaków

2019-04-12 22:29
0

To jest nawet za trudne do modyfikacji. Te programy są tak rozbudowane. Chodzi o zespół plików w js.

Pozostało 580 znaków

2019-04-12 22:30
0

Dajcie coś najprostszego z karuzelami.

Pozostało 580 znaków

2019-04-12 22:39
0

Zobaczyłem te pliki js. Przecież to pisał cały sztab ludzi. Dajcie jakiś prostszy przykład z tymi karuzelami, najprostszy z możliwych z pełnym kodem, aby to można było modyfikować. I oczywiście najlepiej w jednym piliku a nie w 10 plikach, bo tego zmodyfikować nie można.

Pozostało 580 znaków

2019-04-12 23:11
1

Pobierasz paczkę ze strony, która podałeś w pierwszym poście. Interesuje cie z niej folder dist. a w nim pliki:
1.owl.carousel.min.css
2.owl.theme.default.min.css
3.owl.carousel.min.js
Potrzebujesz jeszcze jquery
Zakładając, ze wszytkie pliki sa w tym samym katalogu początkowy kod wygląda tak:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="owl.carousel.min.css">
    <link rel="stylesheet" href="owl.theme.default.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
    <div class="owl-carousel">
        <div> Your Content </div>
        <div> Your Content </div>
        <div> Your Content </div>
        <div> Your Content </div>
        <div> Your Content </div>
        <div> Your Content </div>
        <div> Your Content </div>
    </div>
    <script src="owl.carousel.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".owl-carousel").owlCarousel();
        });
    </script>
</body>

</html>

Pozostało 580 znaków

2019-04-19 22:15
0

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

‹›

Coś takiego pokazuje wyświetlana strona. To jest bez zastosowania. Ma ktoś inne rozwiązanie ? Nie poruszają się zdjęcia na ekranie.

To znaczy, że źle podpiąłeś style lub/i skrypt carousel - pablop76 2019-04-19 22:20

Pozostało 580 znaków

2019-04-19 22:42
0

W tym samym katalogu karuzela luzem, bez katalogów. Tylko pliki w katalogu karuzela.

Pozostało 580 znaków

2019-04-19 22:57
0

To jak to powinno być podpięte w katalogu karuzela na pulpicie. Jak powinny wyglądać ścieżki dostępu ? Zakładam, że mam jeden katalog utworzony karuzela na pulpicie i chcę, aby wszystkie pliki były w katalogu karuzela.

Pozostało 580 znaków

2019-04-19 23:01
0

Jeszcze raz spokojnie, rozumiem że masz już wyodrębnione potrzebne pliki ("owl.carousel.min.css", "owl.theme.default.min.css", "owl.carousel.min.js") i znajdują się one luzem w tym samym katalogu co plik HTML. Jak pisał kolega wyżej ?. Jeżeli tak, to twój plik HTML powinie wyglądać:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="owl.carousel.min.css" /> <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <link rel="stylesheet" href="owl.theme.default.min.css" /> <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <div class="owl-carousel">
      <div class="item">Content1</div>
      <div class="item">Content2</div>
    </div>
    <script src="owl.carousel.min.js"></script> <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <script>
      $(document).ready(function() {
        var owl = $(".owl-carousel");
        owl.owlCarousel({
          items: 2,
          loop: true,
          margin: 10,
          autoplay: true,
          autoplayTimeout: 1000,
          autoplayHoverPause: true
        });
        $(".play").on("click", function() {
          owl.trigger("play.owl.autoplay", [1000]);
        });
        $(".stop").on("click", function() {
          owl.trigger("stop.owl.autoplay");
        });
      });
    </script>
  </body>
</html>

Edit: Ale jak nie zajrzysz do dokumentacji sam, to wątpię, żeby uda Ci się coś sensownego stworzyć z tym.

edytowany 1x, ostatnio: debug, 2019-04-19 23:12

Pozostało 580 znaków

2019-04-19 23:02
0

Stwórz pusty katalog. Umieść w nim plik HTML z kodem, który napisałem oraz trzy pliki carousel, na które wskazują odnośniki w HTML (dwa CSS i jeden js)

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 1, gości: 0, botów: 0

Użytkownik: sugar_hiccup