Hello! There is a carousel link to fiddle How to make an infinite scrolling, i.e. Immediately after the last slide was the first? Just loop:true does not work ..

 $(document).ready(function() { $("#owl-demo").owlCarousel({ navigation: true, pagination: true, lazyLoad: true, loop: true }); }); 
 #owl-demo .owl-item > div img { display: block; width: 100%; height: auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 4px; } #owl-demo .owl-item > div { padding: 0px 2px } 
 <div id="owl-demo" class="owl-carousel"> <div> <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" /> </div> <div> <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" /> </div> <div> <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" /> </div> <div> <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" /> </div> <div> <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" /> </div> <div> <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" /> </div> <div> <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" /> </div> </div>

  • 2
    Connect the Owl Carousel 2 . There, as I see in the documentation , there is a loop parameter, which, when set to true , will give you the desired result. - Deonis
  • @Deonis yes, thanks a lot - published a working version at the top - Vasya

1 answer 1

Yes, the loop parameter is responsible for "closing the carousel." Those. if 5 slides fit on the screen, and only 3 are available, then the loop will complement by cloning 2 more in the format 1 2 3 1 2. To autoscroll, you need to add

 $(document).ready(function() { $("#owl-demo").owlCarousel({ navigation: true, pagination: true, lazyLoad: true, loop: true, autoPlay:3000, /*автопрокрутка время в мс*/ }); });