Vue-carousel: Bug: When scrolled to last item, click anywhere returns carousel to previous page of slides

[jorgvm]

Hi,

Let's say you always show 3 items per slide, and you have 4 items in total. If you show the 4th item, and then click anywhere on the slider, it will return to show the 1/2/3 items.

Here is an example:
https://jsfiddle.net/mfvcu82y/

This is strange, and does not happen if you had 5 items in total:
https://jsfiddle.net/mfvcu82y/3/

I would like to be able to turn his bug/feature off please!

great slider otherwise, thanks 👍

[quinnlangille]

Hey @jorgvm, this is definitely a bug. No idea what could be causing it at first glance, so will take some investigation. If you happen to find a workaround, feel free to make a PR or post your solution here :~)

Thanks for reporting, I'll flag this as a bug fix and see if we can get some contributor traction.

[raynox]

Hey, something wrong happens here:

    render() {
      // add extra slides depending on the momemtum speed
      this.offset +=
        Math.max(
          -this.currentPerPage + 1,
          Math.min(Math.round(this.dragMomentum), this.currentPerPage - 1)
        ) * this.slideWidth;

      // & snap the new offset on a slide or page if scrollPerPage
      const width = this.scrollPerPage
        ? this.slideWidth * this.currentPerPage
        : this.slideWidth;
      this.offset = width * Math.round(this.offset / width);

      // clamp the offset between 0 -> maxOffset
      this.offset = Math.max(0, Math.min(this.offset, this.maxOffset));

      // update the current page
      this.currentPage = this.scrollPerPage
        ? Math.ceil(this.offset / this.slideWidth / this.currentPerPage)
        : Math.ceil(this.offset / this.slideWidth);
    },

this.currentPage is being set to 0 and it slides to the first page. This code is so complicated, I don't know why. I'm trying to fix this, but I need to understand this scroll mechanism first.

[quinnlangille]

Hey @raynox, I agree that the code is really complex. This is by far our most contributed part of the carousel, so it's had many authors and as a result got a little messy. We're planning a refactor of this logic as part of the v1 roadmap, which will hopefully resolve this. However, there's no timeline on that, so if you have a solution feel free to open a PR!

I've opened #274 to discuss the issue. If you have any questions/findings lets pick up the discussion there 👨‍💻

[nebez]

@jorgvm @raynox - we've just published @saschwartz's fix for this issue as v0.16.0-rc2 if you're feeling up for the latest unstable version.

@quinnlangille I'm marking this issue as resolved and we can continue the discussion in #274.

[eliamartani]

I'm using version v0.18 and this issue still happens.

https://codepen.io/eliamartani/pen/XQyWOP

Should I open a new issue for it?

[andrewsmith1996]

I'm using version 0.18.0 and still getting this issue. Has anything been done to fix this?

[BeomyeonAndrewKim]

It still happens now. with ver 0.18.0

[raditia]

Experiencing same on 0.18.0