Reputation: 303
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
margin: 10,
nav: true,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
});
The above code is working fine. But when I change the class named owl-carousel
, it is not working. My question is why it's not working with any other class. Is it required to keep the class name owl-carousel
.
Thanks.
Upvotes: 1
Views: 1840
Reputation: 116
Because the basic demo of the carousel make confusing, it should be.
<div class="carousel-one owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
</div>
and js
$('.carousel-one').owlCarousel({
items: 3,
loop: true,
dots: true,
});
Upvotes: 0
Reputation: 31
You should add owl-carousel
class to the element in all cases,
ex:
<div class="your-own-class owl-carousel"></div>
Upvotes: 3