Owl Carousel не работает с разными классами

Итак, я делаю сайт, и мне нужно больше слайдеров с разными классами, чтобы я мог их настроить, например, на слайдере будет отображаться 3 слайда, на другом будет отображаться только один.

Вот код одного из них:

<div class="testimonials owl-carousel owl-theme owl-loaded">
  <div class="owl-stage-outer">
    <div class="owl-stage">
      <div class="owl-item">
        <div class="s__t__card">
          Distinctively myocardinate adaptive action items without high-quality initiatives. Holisticly envisioneer web-enabled methodologies with integrated relationships. Energistically engage covalent action items whereas customer directed technology. Interactively customize stand-alone services via reliable results.a
        </div>
      </div>
    </div>
  </div>
</div>

jQuery:

$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop: true,
margin: 30,  
nav: false,
dots: false,
autoplay: true,
autoplaySpeed: 2000,
autoplayTimeout: 4000,
responsive: {
  1000: {
    items: 3,
  }
}});
  $('.testimonials').owlCarousel({
loop: true,
margin: 30,  
nav: false,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
autoplayTimeout: 4000,
responsive: {
  1000: {
    items: 1,
  }
}});});

Вот что он делает

Показывает 3 слайда вместо 1, помогите!


person Vadim Surugiu    schedule 23.10.2018    source источник


Ответы (3)


$('.owl-carousel') будет инициировать ползунки с одинаковыми параметрами, потому что у вас есть класс в обеих каруселях

Измените $('.owl-carousel') на $('.owl-carousel:not(".testimonials")') или удалите класс owl-carousel из второй карусели.

person madalinivascu    schedule 23.10.2018
comment
я добавил ':not(.testimonials)' в '$('owl-carousel')', но работает только функция 'items', 'nav', 'dots' и другие вообще не работают для '.testimonials ' - person Vadim Surugiu; 23.10.2018

Поскольку у вас есть классы «отзывы» и «сова-карусель» в одном и том же Div, плагин Owl инициирует оба в одно и то же время.

Либо вы можете поддерживать два отдельных Div для обеих инициализаций карусели, либо инициировать любую из каруселей с помощью $('.owl-carousel:not(".testimonials")').owlCarousel({}); Или $('.testimonials:not(".owl-carousel")').owlCarousel({});

person mohd azhar    schedule 23.10.2018
comment
я добавил ':not(.testimonials)' в '$('owl-carousel')', но работает только функция 'items', 'nav', 'dots' и другие вообще не работают для '.testimonials ' - person Vadim Surugiu; 23.10.2018

в основном проблема заключалась в том, что я пытался изменить настройки карусели в $('.owl-carousel).owlCarousel({}), но мне пришлось сделать это во втором классе карусели, например, первая карусель, которую я сделал, имела класс «функции», поэтому я изменил свой первый $('.owl-carousel).owlCarousel({}) на $('.features').owlCarousel({})

person Vadim Surugiu    schedule 23.10.2018