Сова Карусель 2 для логотипа не зацикливается - PullRequest
Новая
       21

Сова Карусель 2 для логотипа не зацикливается

0 голосов
/ 11 июля 2019

У меня проблемы с загрузочным шаблоном, который я скачал. Тема "ОБНАРУЖИТЬ". В части с логотипом слайд должен использовать бесконечный цикл, но на последнем логотипе он прыгает напрямую и не продолжается до первого. Кто-нибудь может помочь?

Попытка сделать цикл как "ИСТИНА". 

<div class="owl-carousel clients-carousel">
    <img src="img/clients/client-1.png" alt="">
    <img src="img/clients/client-2.png" alt="">
    <img src="img/clients/client-3.png" alt="">
    <img src="img/clients/client-4.png" alt="">
    <img src="img/clients/client-5.png" alt="">
    <img src="img/clients/client-6.png" alt="">
    <img src="img/clients/client-7.png" alt="">
    <img src="img/clients/client-8.png" alt="">
</div>


</script type="text/javascript"> 
$(".clients-carousel").owlCarousel({
    autoplay: true,
    dots: true,
    loop: true,
    autoplayTimeout:2000,
    responsive: {
      0: {
        items: 2
      },
      768: {
        items: 4
      },
      900: {
        items: 6
      }
    }
  });
</script>

1 Ответ

0 голосов
/ 11 июля 2019

Как уже упоминалось в комментарии @Flo, вы опечатали при открытии тега <script>.Также из документации :

Вам не нужна специальная разметка.Все, что вам нужно - это обернуть ваши элементы div (сова работает с любым элементом типа a / img / span ..) внутри элемента контейнера. Класс "owl-carousel" является обязательным для применения надлежащих стилей, которые взяты из файла owl.carousel.css.Если вы хотите использовать стандартные навигационные элементы управления, такие как точки или кнопки, вы также должны включить класс «owl-theme» в тот же div.

Вот рабочий пример: 

<div class="owl-carousel">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-1.png" alt="">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-2.png" alt="">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-3.png" alt="">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-4.png" alt="">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-5.png" alt="">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-6.png" alt="">
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha256-kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>

<script>
  $(document).ready(function(){
    $(".owl-carousel").owlCarousel({
      autoplay: true,
      dots: true,
      loop: true,
      autoplayTimeout:2000,
      responsive: {
        0: {
          items: 2
        },
        768: {
          items: 4
        },
        900: {
          items: 6
        }
      },
    });
  });
</script>

РЕДАКТИРОВАТЬ
Используемый вами шаблон Bootstrap использует более старую версию 2.3.2 карусели сов.Я рекомендую обновить до последней версии.

Похоже, что в старых версиях для правильной работы бесконечного цикла необходимо установить параметр checkVisibility, как упоминалось в этом выпуске .Итак, в дополнение к другим вашим параметрам, установите:

checkVisibility: true

...