Wie setze ich Owl Carousel auf Autoplay

Question

Ich benutze Owl Carousel jquery plugin. Ich möchte autoplay verwenden. aber es funktioniert nicht:

<script src="{{base_url()}}assests/new/js/owl-carousel.js"></script> 
    <script src="{{base_url()}}assests/new/js/owl.autoplay.js"></script> 

     $(document).ready(function(){ 
      var owl = $('.owl-carousel'); 
      owl.owlCarousel({ 
       items:1, 
       loop:true, 
       autoplay:true, 
       autoplayTimeout:1000, 
       autoplayHoverPause:true 
      }); 
     }); 

mein Schieber:

    <div class="owl-carousel owl-slider m20" id="owl-carousel-slider" data-inner-pagination="true" data-white-pagination="true" data-nav="false" data-autoPlay="true"> 




         <div> 
          <div onclick="goToProduct('home-kitchen');" class="bg-holder cursor-pointer"> 
           <img src="{{base_url().'assests/new/img/sliders/home-kitchen.jpg'}}" /> 
           <div class="bg-mask display-none"></div> 
           <div class="bg-front vert-center text-white text-center"> 
            <h2 class="text-uc"></h2> 
            <p class="text-bigger"></p> 
            <p class="text-hero"></p> 
           </div> 
          </div> 
         </div> 

         <div> 
          <div onclick="goToProduct('digital-accessories');" class="bg-holder"> 
           <img src="{{base_url().'assests/new/img/sliders/digital-accessories.jpg'}}" /> 
           <div class="bg-mask display-none"></div> 
           <div class="bg-front vert-center text-white text-center"> 
            <h2 class="text-uc"></h2> 
            <p class="text-bigger"></p> 
            <p class="text-hero"></p> 
           </div> 
          </div> 
         </div> 


        </div> 

meiner Website:

http://www.shadyab.com/category/tehran/commodity/all

Answer 1

Sie sollten nicht items:1 verwenden, wenn Sie automatische Wiedergabe verwenden möchten.

Answer 2

Versuchen diesen Code zu verwenden, anstatt:

owl = $(".owl-carousel"); 
owl.owlCarousel({ 
    loop:true, 
    autoplaySpeed:1000, 
    items:5, 
    autoplay:true 
}); 

es funktioniert mit owl-carousel Version 2.2.1

Ich denke, was könnte ein mögliches Problem sein, wie es mir passiert ist, ist die Verwendung von autoplayTimeout.

Als ich es in den obigen Code einfügte, machte es nur das erste Gleiten und stoppte. Aber als ich es entfernte, fing es an, die autoplay unendlich wie gewünscht zu schleifen.

Hoffe, dass das hilfreich sein wird.