CODEWITHSUNDEEP
owl-carousel
Rajat banerjee
Rajat banerjee

Reputation: 1821

Cloned items in owl carousel

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

owl carousel

Upvotes: 33

Views: 76417

Answers (9)

CamaroSS
CamaroSS

Reputation: 493

You can also hide the cloned elements with CSS.

.owl-item.cloned.active {
  visibility: hidden;
}

Upvotes: 0

Ahsan Najam
Ahsan Najam

Reputation: 363

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

Upvotes: 0

Sourabh Chavan
Sourabh Chavan

Reputation: 187

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

Upvotes: 1

Kamlesh
Kamlesh

Reputation: 6135

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

Upvotes: 19

Crhistian
Crhistian

Reputation: 1272

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

Upvotes: 0

Crystal
Crystal

Reputation: 1505

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.

Upvotes: 55

Maarten Wolfsen
Maarten Wolfsen

Reputation: 1733

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.

Upvotes: 1

Piyush Dhanotiya
Piyush Dhanotiya

Reputation: 579

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

Upvotes: 9

Dan Temple
Dan Temple

Reputation: 1182

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

Upvotes: 72

Related Questions