Bug: Carousel is failing to remain locked to correct position on click

[skyerus]

Bug Report

Current Behavior This is a GIF displaying the issue

Input Code and steps to reproduce

<carousel :perPage="3" :navigationEnabled="true" :paginationEnabled="true" id="select-packaging">
                    <slide v-for="(item, index) in items">
                        <figure class="item-preview" :class="{highlight:item.id === selected}" @click="selected = item.id">
                            {{ item.id }}
                        </figure>
                    </slide>
                </carousel>

data() {
          return {
            items: [
              {
                id: 1
              },
              {
                id: 2
              },
              {
                id: 3
              },
              {
                id: 4
              },
              {
                id: 5
              }
            ],
            selected: undefined,
          }
        },

Expected behavior/code

It works properly when there is at least n + 2 slides (n being the number per page), this is a GIF of it working properly This is the code for it working properly:

<carousel :perPage="3" :navigationEnabled="true" :paginationEnabled="true" id="select-packaging">
                    <slide v-for="(item, index) in items">
                        <figure class="item-preview" :class="{highlight:item.id === selected}" @click="selected = item.id">
                            {{ item.id }}
                        </figure>
                    </slide>
                </carousel>

Environment

• Found the issue on Windows 10 Chrome & IE11 & Edge
• Works as expected on Ubuntu 18.04 Chrome

[quinnlangille]

Hey @skyerus, thanks for the detailed bug report. I definitely have not seen this behaviour before, but can take a look into it! I'll flag as a bug and see if we can get any contributor assistance in the mean time

[lfk29m]

How to do "at least n + 2 slides (n being the number per page)" ?

[skyerus]

@lfk29m this means that if there is 3 slides per page and 5 slides total then it works. If there is 3 slides per page and 4 slides total then it won't work

[lfk29m]

@skyerus thank u. I encountered the same problem ==

[SamuelRiversMoore]

+1 Vue-carousel v0.11.0 Environement : Ubuntu 19.04 Tested on Firefox 67 and Chromium 79

Edit: just tested with v0.18.0 and the bug remains

Edit 2 : The problem seems to be related with the :mouse-drag prop that was set to true. When the property is set to false, the problem disapear.

[Subwaytime]

Still running into the same Issue, any Updates on this ?

[andrewsmith1996]

I'm getting the same issue, does anybody have any update on this?

[carolirod]

The same here, getting the same issue:

• The items I'm using are buttons and onClick, the carousel rolls back to initial position.

Setting the scrollPerPage="false" solved it although I do find much better to be able to have it enabled, since I think it's better for UX since then the user can discover in less clicks all the items in the carousel.

Great component by the way 🤙