ismail9k / vue3-carousel

Vue 3 carousel component
https://ismail9k.github.io/vue3-carousel/
MIT License
653 stars 162 forks source link

Gallery Mode with wrap-around = false doesn't work properly. #367

Open DaleMckeown opened 3 months ago

DaleMckeown commented 3 months ago

Describe the bug When using the double carousel mode, show in the docs as the gallery demo (https://ismail9k.github.io/vue3-carousel/examples.html#gallery). The gallery thumbnails do not correctly navigate to the appropriate slide when setting wrap-around to false, if the slide index is outside of the min/max slide settings.

To Reproduce

  1. Copy the gallery example from the docs.
  2. Set wrap-around to false and set items-to-show to 4.
  3. To the slide, add a button that sets the v-model value of the slide to the slide index.
  4. Click through the slides. At the end of the list, note that the button does not allow you to select the last couple of slides.

Expected behavior When wrap-around is disabled, the gallery thumbnails should still be selectable.

DaleMckeown commented 3 months ago

Here is a codepen that demonstrates the issue:

https://codepen.io/dalemac89/pen/XWGVKNK

To see the issue, load the codepen above and from the bottom carousel click slides 7, 10 and 13. Notice how when clicking slide 13 it then changes you back to slide 11.

I think this is because the two carousels are using the same v-model value, and when changing the gallery carousel, internally the component is not allowing the value to go above what would be the center value - had a quick look at the source code and there appears to be a min and max value set for the carousel.

So when clicking slide 13 it's updating the main carousel, the gallery carousel refuses, updates the value back to 11 which then changes main gallery.

I tested the below configs on the codepen and got the following results:

slides items-to-show status
10 5 broken
11 5 working
12 5 broken
13 5 working
14 5 broken
15 5 working
10 6 broken
11 6 working
12 6 broken
13 6 broken
14 6 working
15 6 broken
10 7 working
11 7 broken
12 7 broken
13 7 working
14 7 broken
15 7 broken
DaleMckeown commented 3 months ago

For anyone coming across this issue in the future, the workaround for this is to use two separate data properties, one for each of the carousels. When clicking the button in the gallery carousel, update the model for both carousels. The component will internally reset the value for the gallery carousel to its min or max allowed, without updating the main carousel value.

This will introduce another issue as when you change the slide by swiping on the main carousel you'll no longer be updating the value for the gallery carousel. I used the slide-start event on the main carousel to then update the value of the gallery carousel accordingly.

This workaround resolved my issue, but it would be cleaner if a proper fix could be found. Ideally if wrap-around is set to false the min/max values should be the full range of the slide indices.

Here is a pen showing the workaround - https://codepen.io/dalemac89/pen/abMEmdG