Owl Carousal2 with items 1 and loop true

Question

$(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)]] is undefined. this error due to only one item div and property loop true and item 1. So. any solution at this situation. I know this type of Situation does not occurs but if any solutions please tell me Thanks a lot.

score 17 · Answer 1 · answered May 27 '15 at 17:39

17

Add onInitialize and check how many items the carousel contains. If the carousel has 1 or less items, set 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;
        }
    }
  })
});

answered May 27 '15 at 17:39

Balloonatic

171
7

you are right if item is one than loop false, but scenario is that item one and loop true is possible? – Ashish Mehta May 28 '15 at 06:52
It should be possible, but it is a bug in the owl carousel. – Balloonatic May 29 '15 at 07:43

score 13 · Answer 2 · answered Nov 25 '15 at 14:38

13

Try this:

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

answered Nov 25 '15 at 14:38

Alessandro.Vegna

1,262
10
19

score 2 · Answer 3 · answered Apr 27 '16 at 23:04

2

I made a very basic fix (on the owl.carousel.js file). Check my comment here https://github.com/OwlCarousel2/OwlCarousel2/issues/1200#issuecomment-215254526

It's an extremely quick & dirty fix. That I'll try to enhance as soon as I can.

answered Apr 27 '16 at 23:04

Federico Rodriguez

398
1
3
8

score 1 · Answer 4 · edited Oct 23 '18 at 09:32

1

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

Change the selector according to your needs.

This works too.

edited Oct 23 '18 at 09:32

slfan

8,950
115
65
78

answered Oct 23 '18 at 09:13

Naveen L Bhandari

179
7

score 0 · Answer 5 · answered May 26 '15 at 04:55

0

Include owl.carousel.min.css file below the jquery.min.js file and also include those files at the bottom of the page.

answered May 26 '15 at 04:55

stanze

2,456
10
13

that is not an issue. – Ashish Mehta May 26 '15 at 05:09

score 0 · Answer 6 · answered May 27 '15 at 03:31

0

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

answered May 27 '15 at 03:31

Developer

1,409
2
23
46

Hello @Ashley u r right but at responsive but i want items:1 only and also
1
only one. and loop property true. i know this type of situation does not occurs but in case. – Ashish Mehta May 27 '15 at 07:42

Ashish Mehta · Answer 7 · 2016-03-01T05:58:29.380

0

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

edited Mar 01 '16 at 05:58

answered Sep 15 '15 at 11:48

Ashish Mehta

7,226
4
25
52

Owl Carousal2 with items 1 and loop true

7 Answers7

1

Linked