Clever Geek Handbook

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>
Run codeHide result


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.

+5


source to share


8 answers


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;
        }
    }
  })
});
+13


source


Try the following:



$('.owl-carousel').owlCarousel({
    loop: $('.owl-carousel .item').size() > 1 ? true:false,
    items: 1,
    margin:10,
    nav:true
})
+7


source


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.

+1


source


Include the owl.carousel.min.css

file below the file jquery.min.js

, and also include those files at the bottom of the page.

0


source


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
        }
    }
})
0


source 


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


source 


var a = $(".owl-parent");
loop: owl.children().length > 1

Modify the selector to suit your needs.

This works too.

0


source


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 ...

0


source






More articles:


All Articles