2016-07-10 33 views
1

私はOwl Carousel jqueryプラグインを使用しています。私はautoplayを使いたいです。しかし、それは動作しません:Owl Carouselを自動再生に設定する方法

<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 
      }); 
     }); 

私のスライダー:

    <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> 

私のウェブサイト:あなたが自動再生を使用する場合は

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

答えて

2

あなたはitems:1を使用しないでください。

+0

私は5に変更しましたが、動作しませんでした。 –

2

代わりにこのコードを使用してみてください:、それは私はそれが私に起こったとして、問題がある可能性が何であるかと思いますバージョン2.2.1

で動作します

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

使用していますautoplayTimeout

私は上記のコードに含めると、最初のスライドだけを行い、停止しました。しかし私がそれを取り除くと、それは希望通りに無限にautoplayをループし始めました。

希望すると助かります。

関連する問題