I work with owl carousel 2 for carousel content.
JS:
$('#owl-demo').owlCarousel({
loop: true,
margin: 10,
nav: true,
items: 1,
});
HTML:
<div id="owl-demo" class="owl-carousel">
<div class="item"><h4>1</h4></div>
</div>
Problem:
when I have one content (dynamic content using PHP) loop:true
and items:1
not work and I see blank But if I add two content Owl worked true!!
EDIT : my content is dynamic ( 1 - ....). when my result is one content owl have a problem.
Problem DEMO
worked DEMO
how do fix this problem ?
You can use rewindSpeed: 0 with rewindNav : true. I tested with these settings: $("#owl-slider-hero").
I hope the below method will solve your problem.
You dont need to edit the owl carousel js.
The same method can be applied to Bx Slider also.
$('.owl-demo').owlCarousel({
margin: 0,
responsiveClass: true,
smartSpeed: 500,
dots: ($(".owl-carousel .item").length > 1) ? true: false,
loop:($(".owl-carousel .item").length > 1) ? true: false,
responsive: {
0: {
items: 1,
},
500: {
items: 1,
},
768: {
items: 1,
}
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With