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,
}
}});});
It shows 3 slides instead of 1, please help!
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({})