Open DaleMckeown opened 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 |
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
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
Expected behavior When wrap-around is disabled, the gallery thumbnails should still be selectable.