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

score 71 · Accepted Answer · answered Nov 17 '15 at 15:12

71

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

answered Nov 17 '15 at 15:12

Dan Temple

1,172
2
14
22

2

this does fix it... but i want my slideshow to loop :( – Kyle Jun 19 '18 at 23:13
2

Resolved my problem :-) But I have one concern regarding OwlCarousel - Why do they make a clone of every item? Is there any specific reason for all this? – Vikas Chauhan Feb 25 '19 at 12:21
1

I added a check to the code, over X items will activate the loop. otherwise no loop. – omadawn Jun 30 '20 at 09:41

score 51 · Answer 2 · answered Sep 18 '18 at 03:19

51

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.

answered Sep 18 '18 at 03:19

Crystal

1,425
1
22
34

3

Doesn't solve the problem, because when you are at the end of the slides, it's a rewind and not a loop, but still a better solution of the accepted answer. Thanks. – Channel Sep 18 '19 at 09:22

score 17 · Answer 3 · answered Oct 09 '19 at 14:12

17

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

answered Oct 09 '19 at 14:12

Kamlesh

5,233
39
50

1

Very smart solution! Works in my case. Thank You @Kamlesh – Jankyz Oct 21 '19 at 07:43
Thank you for this answer , i think using this selector ```loop: ( $('.owl-carousel > *').length > 5 ),``` is more general . thank you again for this smart answer – smarteist Dec 16 '19 at 10:54
This is great, but one issue is that if you have a responsive carousel, where the number of items shown varies based on breakpoints, then this won't work. But it's still a great solution if you never vary the number of items shown. – Hashcut Jan 30 '20 at 23:26
2

@Hashcut This works perfectly to solve your issue, remove the loop from the main options, and put it in each break point, for example 780: { items: 3, dots: false, loop: ( $('.owl-carousel .items').length > 3 ), }, 1000: { items: 4, dots: false, loop: ( $('.owl-carousel .items').length > 4 ), } – Rodrigo Zuluaga Jun 09 '20 at 21:22

score 9 · Answer 4 · answered Feb 25 '16 at 12:47

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

score 1 · Answer 5 · answered Aug 31 '18 at 08:09

1

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.

answered Aug 31 '18 at 08:09

Maarten Wolfsen

1,625
3
19
35

Sourabh Chavan · Answer 6 · 2021-09-06T18:04:40.700

set loop: false
In my case, I was passing loop: true to every responsive item that will also create cloned items even if you passing loop: false. so remove that also

$('.owl-carousel1').owlCarousel({
    loop:false,
    margin: 10,
    nav: true,
    navText:[
        prevIcon,
        nextIcon
    ],
    responsive: {
        0: {
            items: 1,               
            loop:true
            ---------
        },
        576: {
            items: 2,               
            loop:true
            ---------
        },
        768: {
            items: 3,               
            loop:true
            ---------
        },
        992: {
            items: 4,               
            loop:true
            ---------
        },
        1200: {
            items: 4,               
            loop:true
            ---------
        }
    }
});

Crhistian Ramirez · Answer 7 · 2019-06-06T19:53:37.693

0

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

edited Jun 06 '19 at 19:53

answered Jun 06 '19 at 19:47

Crhistian Ramirez

1,066
12
20

score 0 · Answer 8 · answered Mar 29 '22 at 10:34

This worked for me!!! The issue is with this "loop:true". Make it false or apply it as given below.

$(".employerList").owlCarousel({      
   loop:true,
    margin:20,
    nav:true,
    center: true,
    responsiveClass:true,
    responsive:{
        0:{
            items:3,
            nav:true
        },
        768:{
            items:5,
            nav:true
        },
        1170:{
            items:10,
            nav:true,
            loop:( $('.employerList').length > 4 )
        }
    }
});

Cloned items in owl carousel

8 Answers8

Linked