Owl Carousal2 with 1 elements and loop true
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
items: 1
})
});
<div class="owl-carousel">
<div class="item"><h4>1</h4></div>
</div>
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
Console error: TypeError: items [clones [(clones.length - 1)]] undefined.
this error is due to only one element div
and property loop true
and point 1. So. any solution in this situation. I know this type of situation does not arise, but if any solutions please tell me thanks.
Add onInitialize and check how many items the carousel contains. If the carousel has 1 or fewer items, set the loop to false.
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
items: 1,
onInitialize: function (event) {
if ($('.owl-carousel .item').length <= 1) {
this.settings.loop = false;
}
}
})
});
Try the following:
$('.owl-carousel').owlCarousel({
loop: $('.owl-carousel .item').size() > 1 ? true:false,
items: 1,
margin:10,
nav:true
})
I made a very basic fix (in owl.carousel.js file). Check out my comment here https://github.com/OwlCarousel2/OwlCarousel2/issues/1200#issuecomment-215254526
This is a very quick and dirty fix. This I will try to improve as soon as I can.
Include the owl.carousel.min.css
file below the file jquery.min.js
, and also include those files at the bottom of the page.
check this demo
is this the one you are looking for?
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
if($(".owl-carousel").length > 0){
$(".owl-carousel").owlCarousel({
items: 1,
nav: $(".owl-carousel > .item").length <= 1 ? false : true,
dots: false,
loop:$(".owl-carousel > .item").length <= 1 ? false : true,
autoplay:true,
navText: "",
});
}
var a = $(".owl-parent");
loop: owl.children().length > 1
Modify the selector to suit your needs.
This works too.
Owl-carousel loop: kısımlarına sadece şunu eklemeniz yeterli dikkat " > .item " olarak değil loop: $ (". Owl-carousel > ") .length <= 1? lie: true, olarak ekleyin kesin çalışıyor ...