Сова Карусель не работает с разными классами - PullRequest
0 голосов
/ 23 октября 2018

Итак, я делаю сайт, и мне нужно больше слайдеров на нем, с различными классами, чтобы я мог настроить их, например, на слайдере будет отображаться 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, пожалуйста, помогите!

Ответы [ 3 ]

0 голосов
/ 23 октября 2018

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

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

0 голосов
/ 23 октября 2018

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

0 голосов
/ 23 октября 2018

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

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

...