Search code examples
jqueryowl-carousel-2

Owl Carousel not working with different classes


So i am making a site, and i need more sliders on it, with different classes so I can customize them, for example on slider will display 3 slides, another one will display only one.

Here is the code for one of them:

<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,
  }
}});});

Here is what it does

It shows 3 slides instead of 1, please help!


Solution

  • basically the problem was that i tried to change the carousel settings in $('.owl-carousel).owlCarousel({}), but i had to do it in the second class of the carousel, for example the first carousel i did had the class 'features', so i changed my first $('.owl-carousel).owlCarousel({}) to $('.features').owlCarousel({})