Owlcarousel2: Cannot read property 'clone' of undefined

[epiblue]

This error appear if Owl container has only 1 child.

If there are to Items then it works perfectly.

I use this for image slider for my store.

How can it be fixed?

Thanks,

[TPDBrendan]

I ran into the same problem. Unfortunately, it causes some of the other scripts on my page to fail as well if there's only one child. It does resolve itself if I add another slide, though. Awesome slider, though!

[epiblue]

Thanks for the reply :+1:

[leandroruel]

are you using, "loop: true" ? if yes, try remove it.

[TPDBrendan]

Yea, thanks, that seemed to do the trick as well!

[richardvanbergen]

While this is a bug. I find that the best way to handle it is to not initialize the carousel if there is only one item. Because a carousel with one item is... well... stupid and unnecessary.

[shorstki]

On my carousel (2.0) bug appears only on mobile - desktop carousel with one item works nice.

Initializing carousel only with one item is not stupid at all, because sometimes items are created dynamically depending on user actions. Only option for hiding controls automatically (for one item/page) should be implemented ;)

[leandroruel]

There should be a way to add items dynamically and restart the carousel again

[richardvanbergen]

var owl = $('.owl-carousel');
owl.owlCarousel();
owl.trigger('refresh.owl.carousel');

There's also replace.owl.carousel, add.owl.carousel and remove.owl.carousel to dynamically add/remove/replace items. I haven't tried it myself, so I can't confirm that it actually works but the API seems to be there.

[celiosilva]

I agree with shorstki. just now ran into this issue because in my app the client can decide how many itens he wants, therefore he might (and did) just choose one.

[richardvanbergen]

@celiosilva So, is there a reason you can't just not initialize it if there is only one child? Why would you carousel a single item?

Like I said, it's not a proper fix, it would be better if the library handled it properly but it's pretty simple to do:

var owl = $('.owl-carousel');
if (owl.children().length > 1) {
  owl.owlCarousel();
} else {
  // apply some CSS classes to fake it
}

Also, not initializing stuff you don't need is usually a good thing.

[greg5green]

This is fixed in the newest version of OwlCarousel2. You can grab it from http://smashingboxes.github.io/download/owl.carousel.2.0.0-beta.3.zip or bower

[marekmaurizio]

I avoided using special CSS on single slides using this code:

var owl = $('.header-slider');
          owl.owlCarousel({
            nav: owl.children().length > 1,
            navText: ["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],
            pagination: false,
            items: 1,
            autoplay: false,
            autoplaySpeed: 500,
            loop: owl.children().length > 1
          });

the problem occurs only when loop is enabled, so i disable loop and nav when there is only one item. The slider gets initialized without errors.

[leecollings]

So... has this not been fixed? The link to the latest version above no longer works. Bug is still in the current beta version available on the website, and still the carousel doesn't display when only one slide is there.

It should by default at the very least show the slide. It may not be functional, but at least it won't break and not show anything.

Can someone update this thread please?

[kumarravisingh]

Yeah, the bug is still there in the mobile version, why the thread is closed?

[programmersujeet]

I was facing the same issue
Now just fixed it using a hack.
I am just checking the elements needs to be slided and if its one, setting the loop value to false

$('.upcomingevent-carousel').owlCarousel({
loop: ($('.upcomingevent-carousel').children().length)==1 ? false:true,
........
...
});

[avinashthool]

removing loop:true trick worked,,, super help

[trysetyoutomo]

thanks brother