Owlcarousel2: Jumps randomly to last item with loop=false

[VilleImmonen]

We have a carousel without infinite loop. This is happening randomnly, but very often: clicking in the first items causes the carousel to jump to the last item. This bug is also present in the demos, for example here:

https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

If you keep clicking in different spots in box 1, it suddenly jumps to 12.

[rainstormza]

same issue

[dizzygin]

Hi,
I'm facing the same issue, is there any update on this?

Thanks!

[viacheslavGrygoriev]

Same problem

[vikramarka]

Yes.. I'm also experiencing the same issue. Did anyone find a solution?

[hexplor]

Same here. It drives me crazy.

[simmonsr]

Yes, please fix!!

[hexplor]

Ok, folks i think i found temporary fix. Open owlcarousel.js, line 807 and find:
direction = delta.x > 0 ^ this.settings.rtl ? 'left' : 'right';
then change it to:
direction = 'left';

It probably breaks other stuff but it works for me...

[moklaf]

This problem is due to mouse drag.
"mouseDrag : false" - solve the problem, but it's not cool.
Please fix this.

[vtrmrx]

I changed line 807 to:

carousel_list = $(this); if ( carousel_list[0]._current == 0) { var direction = 'left'; } else { var direction = delta.x > 0 ^ this.settings.rtl ? 'left' : 'right'; }

basically, it does what @hexplor suggested, but only when dragging the first carousel item (carousel_list[0]._current == 0), which was the buggy item in my case.

However, I'm pretty sure the carousel_list[0] may break something as well. My guess is that $(this) (which I assigned to carousel_list) in Owl.prototype.onDragEnd is an array with all owl carousels in the document, and as my page has only one carousel, carousel_list[0] worked for me.

[benoit-roubert]

Personnaly I added the following modifications to take into account last element of carousel and to deal with the bug that clicking on items sometimes drags a little elements, and were provoking also the bug.

So after dealing with first / last elements, there is a rule that let the "direction = 'left'" default value (that seems to circumvent the bug) when Math.abs(delta.x) ≤ 30.

var carousel_list = $(this);
var number_of_items = this._items.length;

if ( carousel_list[0]._current == 0)
{
direction = 'left';
}
else if ( carousel_list[0]._current == (number_of_items - 1))
{
direction = 'right';
}
else
{
if(delta.x > 30){ direction = "left";}
if(delta.x < -30) { direction = "right";}
if(Math.abs(delta.x) <= 30){ direction = "left";}
}