swiper
swiper copied to clipboard
Slide in closest direction when in loop mode
Clear and concise description of the problem
Hi,
when sliding to a specific index, one can run swiper.slideTo(ndx). However when having the loop mode enabled, the swiper should have the option to slide in the closest direction to the desired index. For example when being on slide 10 and attempting to go to slide 1, it will go over all slides on the left instead of going one step to the right when having 10 slides in total.
Suggested solution
Either this becomes the default behavior of slideTo() when in loop mode or an option to enable that behavior.
Alternative
No response
Additional context
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the docs.
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Would you like to open a PR for this feature?
- [ ] I'm willing to open a PR
Just found the slideToLoop() method, but the behavior is the same as with slideTo(), without going in the closest direction.
Nice option. I prefer to follow the shortest path of slides you've actually seen. So if you're on slide 8/10 and you haven't seen 9 and 10, and you want to go to 1/10, then I prefer to go back, to the left. It feels odd and unexpected to go forward, unless you've seen them all.
My workaround for this when in loop mode:
const mySlides = [...] //represents the content in each slide
const nextIndex = 0 //updated when navigating to another slide
...
if (swiper.realIndex === mySlides.length - 1 && nextIndex === 0) {
swiper.slideNext()
} else {
swiper.slideToLoop(nextIndex)
}
+1
i'm having the same issue with 7 slides, 4 showing each time. if i navigate from slide 6 to slide 1, it scrolls backwards.
@jmattiace that workaround only works if you navigate 1 by 1, if you want to navigate, let's say, from index 1 to index 4, that doesn't work.
Any progress on this? Having the same problem on a new project now
Swiper v9 comes with fully reworked and now different loop functionality. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.