Cloned items in owl carousel

Question

While building the carousel I realized that an owl add's cloned duplicate items. My owl config looks like this. How do i stop this from happening.

owlDfe.owlCarousel({
            loop: false,
                        autoWidth:false,
                        nav:false,
                        responsiveClass:true,
                        responsive:{
                            0:{
                                items:sizes.mobile_portrait
                            },
                            568:{
                              items:sizes.mobile_landscape
                            },
                            768:{
                              items:sizes.ipad
                            },
                            800:{
                                items:sizes.desktop
                            },
                            1000:{
                                items:sizes.desktop,
                            }
                        }
          });

Answer 1

jQuery('.owl-carousel2').owlCarousel({
    loop:false,
    margin:10,
    nav:true,
    mouseDrag:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:3
        }
    }
})

         });

Make loop false and it works not creating cloned items

Answer 2

So, I've been banging my head over this cloning issue with passing click events to the cloned slide....

what finally solved it for me is to set these two config values:

loop: false,

rewind: true

This will allow the carousel to still loop around but not duplicate slides.

Answer 3

I had this issue - I found that setting the loop option to false resolved it for me.

Answer 4

All of these answers solve the root issue but then you can't use loop :(

I was able to preserve loop and click behavior by updating the data as needed so that it was never necessary for owl to clone elements for me.

var toClone = Object.keys(owlConfig.responsive).length - slides;
if(toClone > 0) {
    slides= [...slides, ...slides.splice(0, toClone)];
}
// initialize carousel here

Answer 5

Get ready for Awesome solution of this problem:

If you want to set loop:true in case of having more than particular number of items (in my case i am using 5 items on a screen, total scrollable items are 15)

loop: ( $('.owl-carousel .items').length > 5 )

Above solution will not run loop in case of having less than 6 items while loop will be enabled automatically in case of having more than 5 items.

This solved my problem, i hope, this will also help you. Thanks for asking this question and enjoy this code :)

Answer 6

In my case I found out, that when I added items: 4, but the amount of items was less than that, it would clone duplicated.