0

Всем привет! Есть карусель ссылка на fiddle Как сделать бесконечную прокрутку, т.е. сразу после последнего слайда шел первый? Просто loop:true не срабатывает..

$(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
  • 2
    Подключите Owl Carousel 2. Там, как я вижу по документации, присутствует параметр loop, задав которому значение true, вы получите желаемый результат.
    – Deonis
    20 июл 2015 в 8:38
  • @Deonis да, точняк спасибо - опубликовал вверху рабочий вариант
    – Вася
    20 июл 2015 в 14:33

1 ответ 1

1

Да, параметр loop отвечает за "замыкание карусели". Т.е. если на экране помещается 5 слайдов, а в наличии всего 3, то loop дополнит клонировав еще 2 в формате 1 2 3 1 2. Для автопрокрутки нужно добавить

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.