Owlcarousel2: The "loop" setting cloning items, when it shouldn't

[aik099]

I have carousel with 2 items in it, but configured to show 4 per page with loop option enabled. The these 2 items are cloned to create 4 items, but since scrolling doesn't happen (I have less items than shown per page) it results in duplicate items being shown.

Config:

$('.items').owlCarousel({
    loop: true,
    nav: true,
    margin: 0,
    navText: '',
    items: 1,
    mouseDrag: false,
    responsive: {
        1440: {
            items: 4,
            slideBy: 4
        },
        1020: {
            items: 3,
            slideBy: 3
        },
        740: {
            items: 2.2,
            margin: 20
        },
        340: {
            items: 1.1,
            margin: 10
        }
    }
});

[keefyhub]

Maybe move the loop inside of the responsive option, then define a variable

var shouldLoop = $('.owl-item).length < itemsShown;

You might need a variable for each screen width

var shouldLoop1440 = $('.owl-item).length < itemsShown1440;
var shouldLoop1020 = $('.owl-item).length < itemsShown1020;
...

[aik099]

Maybe this can't be built-in in the library so that with loop setting enabled the cloning doesn't happen, when there is nothing to scroll.

[DD-soft]

If fx. each div item inside the carousel (class call 'items' in your example) has the class="item", i do this in my settings which works perfectly:

responsive: {
    1440: {
        items: 4,
        slideBy: 4,
        loop:( $('.item').length > 4 )
    },
    1020: {
        items: 3,
        slideBy: 3,
        loop:( $('.item').length > 3 )
    },
    740: {
        items: 2.2,
        margin: 20,
        loop:( $('.item').length > 2 )
    },
    340: {
        items: 1.1,
        margin: 10,
        loop:( $('.item').length > 1 )
    }
}

[omaracrystal]

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 may solve your issue.

[aik099]

@DD-soft , totally missed your comment, but your solution looks correct theoretically. Still the carousel could automate that stuff at least.

@omaracrystal , by setting rewind option to true you'll get different visual effect: by the end of carousel you're dragged to the 1st icon of carousel. Since you've disabled loop option, then of course no duplicates would be created, but due to different visual effect that solution won't help.

[omaracrystal]

@aik099 I didn't see any difference in visual effect.

[aik099]

@omaracrystal , that is really strange. Maybe it depends on element count in carousel itself. There won't be 2 options (rewind and loop) if they would be doing the same thing.

[sandip5678]

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 may solve your issue.

thanks for this. it helped.

[vikaschauhan1]

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 may solve your issue.

Thanks 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?

[delroh]

Hmmm API docs states that the rewind option's default value is true, though it doesn't work if you don't explicitly add rewind: true to the options...
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Thank you @omaracrystal, solved my issue.

[kamleshwebtech]

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 may solve your issue.

I used it same but i think below setting is better solution:
loop:( $('.item').length > 5 )

[sam03041993]

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 may solve your issue.

This worked for me , Thank you @omaracrystal :)

[Rattone]

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 may solve your issue.

This is simply a different approach, not a solution.

When you use loop the slide scrolls endlessly.
When you use rewind you go back to the beginning once you reach the end.

Read the docs.

[omaracrystal]

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 may solve your issue.

This is simply a different approach, not a solution.

When you use loop the slide scrolls endlessly.
When you use rewind you go back to the beginning once you reach the end.

Read the docs.

It's a solution for most! May not be a solution for you though.