Owlcarousel2: How do not loop if the carousel is not filled-in completly?

[serhioV]

If in the carousel of 4 items I have just 2 items I don't want to loop. If the carousel is "filled-in", it should loop... Also when resizing should keep same behavior. Is it possible?

[iamthestreets]

+1

I also want to know if this is possible

[fe-rod]

@serhioV I'm facing the same issue at the moment. I'm using multiple carousels and want all of them with the same behavior, that's why I modified the owl.carousel.js file. Consider this as a work in progress and as very basic fix.

I added the following code at the end of the Owl.prototype.setup function in the owl.carousel.js file.

if (this._items.length > 0 && this.settings.items < this._items.length) this.settings.loop = true;

Take into account that this overrides the initial loop option you pass into the plugin, so if you want to be able to set a carousel loop to false even if it has more elements, you should add that check.

The this._items.length > 0 is because the carousel calls twice the setup function, the first time without items. Couldn't check why, yet.

The reason why I use the setup function, is because it's called when the carousel updates its state after resizing the viewport (responsive case), and setting loop or false in the initialization of the plugin was not enough.

I'll try to post a better implementation on the following days.

BTW: I'm using Owl Carousel v2.1.1, which seems to remove the navigation arrows it there are not enough items to fill the viewport. This also helps to achieve what I was trying to do.

[daviddeutsch]

@fe-rod would love to see a PR here that I can test!

[FearTheWild]

@fe-rod Only working resolution still to date

[seltix5]

I have the same problem. No solution yet?

[bogdaniculae]

I had the same problem. This is my code: loop: $('.owl-carousel .item').size() > 1 ? true:false,. Hope it helps!

[fede-s]

@serhioV I'm facing the same issue at the moment. I'm using multiple carousels and want all of them with the same behavior, that's why I modified the owl.carousel.js file. Consider this as a work in progress and as very basic fix.

I added the following code at the end of the Owl.prototype.setup function in the owl.carousel.js file.

if (this._items.length > 0 && this.settings.items < this._items.length) this.settings.loop = true;

Take into account that this overrides the initial loop option you pass into the plugin, so if you want to be able to set a carousel loop to false even if it has more elements, you should add that check.

The this._items.length > 0 is because the carousel calls twice the setup function, the first time without items. Couldn't check why, yet.

The reason why I use the setup function, is because it's called when the carousel updates its state after resizing the viewport (responsive case), and setting loop or false in the initialization of the plugin was not enough.

I'll try to post a better implementation on the following days.

BTW: I'm using Owl Carousel v2.1.1, which seems to remove the navigation arrows it there are not enough items to fill the viewport. This also helps to achieve what I was trying to do.

a little improvement, this will disable looping when there are not enough items

this.settings.loop = this.settings.loop && this._items.length > this.settings.items;

[arbabi2010]

I have the same problem. any solution yet?