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

0

Ale wszystkie ustawienia są w dokumentacji. Potrafisz z niej korzystać?
autoplay

0

Nie wiem jak to zrobić.

0

var owl = $('.owl-carousel');
owl.owlCarousel({
    items:3, //ILE JEST OBRAZKÓW
    loop:true, // CZY MAJA SIĘ KRĘCIĆ W KÓŁKO JEŻELI DOJDZIE DO KOŃCA
    margin:10, //MARGINES MIĘDZY ZDJĘCIAMI
    autoplay:true,  //CZY MAJĄ SIĘ KRĘCIĆ SAME OD RAZU PO ZAŁADOWANIU
    autoplayTimeout:1000,  // W JAKIM INTERWALE MAJĄ SIĘ KRĘCIĆ
    autoplayHoverPause:true // CZY PO NAJECHANIU MYSZKA MAJA SIĘ ZATRZYMAĆ
});

To jest kilka ustawień. autoplay:true, odpowiada za automatyczne przewijanie. Każde ustawienie musi być wpisane po przecinku. To jest przekazanie obiektu z ustawieniami do metody owlCarousel({})

0

Gdzie ja mam ten kod wpisać, w którą część programu ?

0

zamiast

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})
});

0

To jest cały program, który oczywiście nie działa. Jak powinien wyglądać ten działający,. Dziękuję za informację.




``<!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="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>


   var owl = $('.owl-carousel');
owl.owlCarousel({
    items:3, //ILE JEST OBRAZKÓW
    loop:true, // CZY MAJA SIĘ KRĘCIĆ W KÓŁKO JEŻELI DOJDZIE DO KOŃCA
    margin:10, //MARGINES MIĘDZY ZDJĘCIAMI
    autoplay:true,  //CZY MAJĄ SIĘ KRĘCIĆ SAME OD RAZU PO ZAŁADOWANIU
    autoplayTimeout:1000,  // W JAKIM INTERWALE MAJĄ SIĘ KRĘCIĆ
    autoplayHoverPause:true // CZY PO NAJECHANIU MYSZKA MAJA SIĘ ZATRZYMAĆ
}); 



   <div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
        </div>


    </div>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script>
margin:10,
    responsiveClass:true,
var owl = $('.owl-carousel');
owl.owlCarousel({
    items:3, //ILE JEST OBRAZKÓW
    loop:true, // CZY MAJA SIĘ KRĘCIĆ W KÓŁKO JEŻELI DOJDZIE DO KOŃCA
    margin:10, //MARGINES MIĘDZY ZDJĘCIAMI
    autoplay:true,  //CZY MAJĄ SIĘ KRĘCIĆ SAME OD RAZU PO ZAŁADOWANIU
    autoplayTimeout:1000,  // W JAKIM INTERWALE MAJĄ SIĘ KRĘCIĆ
    autoplayHoverPause:true // CZY PO NAJECHANIU MYSZKA MAJA SIĘ ZATRZYMAĆ
});

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})
});
    </script>


  </body>
</html>

0

Napisałem ZAMIAST

0

Jest teraz tak i nic się nie dzieje. 

<!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="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>




   <div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
        </div>





    </div>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script>
margin:10,
    responsiveClass:true,




var owl = $('.owl-carousel');
owl.owlCarousel({
    items:3, //ILE JEST OBRAZKÓW
    loop:true, // CZY MAJA SIĘ KRĘCIĆ W KÓŁKO JEŻELI DOJDZIE DO KOŃCA
    margin:10, //MARGINES MIĘDZY ZDJĘCIAMI
    autoplay:true,  //CZY MAJĄ SIĘ KRĘCIĆ SAME OD RAZU PO ZAŁADOWANIU
    autoplayTimeout:1000,  // W JAKIM INTERWALE MAJĄ SIĘ KRĘCIĆ
    autoplayHoverPause:true // CZY PO NAJECHANIU MYSZKA MAJA SIĘ ZATRZYMAĆ
});




    </script>


  </body>
</html>