ismail9k / vue3-carousel

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

Change the current implementation for wrap-around #230

Closed ismail9k closed 1 year ago

ismail9k commented 1 year ago

Motivation

It looks like the current implementation for warp-around is not reliable and gives wired behaviors especially when carousel items are less than the items-to-show value.

Related issues: #229 #216 #169 #152

The current implementation

The idea for the current implementation is to change the order of the current slides, using the flex-box ordering property; to try to balance the rest of the slides to keep an equal amount of the slides count around the currently active slide

curret_sloution

The suggested implementation

By cloning the slides items to the left and right of the original slides, that way we will have enough buffer of slides to achieve the infinite scrolling behavior

Untitled-2022-09-30-1738

ismail9k commented 1 year ago

Implemented in v0.2.0