Owlcarousel2: Carousel slides wrong direction

[timwright35]

I am having an issue with owl where we have multiple owl carousels on a page, each with variable amount of items. For the most part they work great but one of the carousels, has about 8 items with around 5-6 "per page", it scrolls backwards from all the rest of the carousels. I have not been able to find the way to fix it.

I will try to get a JS fiddle to replicate the issue, till then I wanted to see if anyone know anything.

[greg5green]

I recently updated the Codepen, JSFiddle, and JSBin templates to work with the newest version of OwlCarousel2. You can find them in CONTRIBUTING.md.

[timwright35]

Thanks, the problem seems to be when updating and dynamically remaking a carousel after new data comes in. It could be the methods used to do that, it is my co-developer that is mainly working on it. I get an update and close this if he has figured it out, otherwise try to reproduce it in the systems you updated.

[wvteijlingen]

I seem to have the same problem. The carousel slides in the wrong direction when loop is enabled, and the total count of items is less than twice of the visible count. Has there been any progress on this?

[dryoma]

I confirm this bug. This pen demonstrates it. The conditions are exactly these:

The carousel slides in the wrong direction when loop is enabled, and the total count of items is less than twice of the visible count.

E.g., with 10 total items and this:

{
  ...
  loop: true,
  items: 7,
  slideBy: 6,
}

the click on "next" will scroll the carousel 4 (10-6) items backwards instead of 6 items forwards.

[dryoma]

The reason seems to be this check in Owl.prototype.to method:

if (this.settings.loop) {
    if (!this.settings.rewind && Math.abs(distance) > items / 2) {
        distance += direction * -1 * items;
    }

i.e., for loop: true, if rewind is false and we need to scroll more than items / 2, it specifically makes the carousel to go the other direction. So bacically, if there is no rewind with loop, the direction will be messed, if there is - then after getting to the leftmost slide the carousel, well, will get rewound (as per 2.1.6)

I'm having a bit of a hard time figuring out the logic behind that; @daviddeutsch @CracyCrazz @witrin maybe you give a hand with understanding it? If not, I'll be happy to make a PR, since the fix seems to be quite straightforward.

[jsmoorejr]

Just wondering what the actual fix is for this or if there is one. I am having the same issue, but not sure how to fix it.

[swinggraphics]

Label should be changed from Question to Bug. The carousel should not go the wrong direction, regardless of the number of items.

Solution: remove these lines
if (!this.settings.rewind && Math.abs(distance) > items / 2) { distance += direction * -1 * items; }

[nfritsche]

Any Update on this? I can modify the code to fix it, but I would rather not have to mess with source code?

[jsmoorejr]

@nfritsche This has not been fixed as of v2.3.4. I suspect that it is probably considered low priority. I just removed the line and that did the trick. Obviously, updating will overwrite that change, so it would be nice if it were fixed in code and put into a new release.

[pascalporedda]

Provide me a PR and I'll be willing to review it.

[AhHa45]

I am on v2.3.4 and still have this issue, ok with this setting I was able to set use slideBy option and slide to the right direction:

``const carouselSettings = { const carouselSettings = { items: 3, loop: false, touchDrag: false, mouseDrag: false, slideBy: "page", nav: true, navText: ["<span class='icon icon-arrow-left'></span>", "<span class='icon icon-arrow-right'></span>"], dots: false, autoPlay: false, margin: 30, responsive: { 0: { items: 1, slideBy: 1, loop: true, autoWidth: false, autoPlay: false, dots: true, margin: 15, }, 992: { items: 1, slideBy: 1, loop: true, autoWidth: false, autoPlay: false, dots: true, margin: 30 }, 1280: { items: 3, slideBy: 3, <--- autoWidth: false, <--- this is my custom requirement rewind: true, <--- set to true loop: true, <--- set to true autoPlay: false, dots: false, margin: 30 } } };

hope it helps anyone who comes across this issue

[arshleyd]

Setting loop to false and adding slideBy: "page" worked for me! Thanks, AhHa.

owl = $('.owl-carousel').owlCarousel({ loop:false, nav:true, dotsData:true, dotsContainer: '#carousel-custom-dots', items: 1, slideBy: "page", })

[amroeldewiny]

This answer was right but in min.js file you will not see this line exactly So i fix it like this.
if (!this.settings.rewind && Math.abs(distance) > items / 2) { distance += direction * -1 * items; }
Solution: JUST remove " ! "
if (this.settings.rewind && Math.abs(distance) > items / 2) { distance += direction * -1 * items; }

[humajamshed]

I am still having issue, I have 10 items and i need to slide by 6 items but when I click previous button twice . The owlCarousel gets rewind to some position

[humajamshed]

This answer was right but in min.js file you will not see this line exactly So i fix it like this.
if (!this.settings.rewind && Math.abs(distance) > items / 2) { distance += direction * -1 * items; }
Solution: JUST remove " ! "
if (this.settings.rewind && Math.abs(distance) > items / 2) { distance += direction * -1 * items; }

This answer was right but in min.js file you will not see this line exactly So i fix it like this.
if (!this.settings.rewind && Math.abs(distance) > items / 2) { distance += direction * -1 * items; }
Solution: JUST remove " ! "
if (this.settings.rewind && Math.abs(distance) > items / 2) { distance += direction * -1 * items; }

Not working in my case plz help