swiper icon indicating copy to clipboard operation
swiper copied to clipboard

Slide in closest direction when in loop mode

Open infusion opened this issue 3 years ago • 2 comments

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

infusion avatar Sep 18 '22 18:09 infusion

Just found the slideToLoop() method, but the behavior is the same as with slideTo(), without going in the closest direction.

infusion avatar Sep 18 '22 19:09 infusion

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.

dijkermans avatar Sep 19 '22 09:09 dijkermans

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)
}

jmattiace avatar Oct 04 '22 02:10 jmattiace

+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.

RicardoMoraisPOR avatar Oct 21 '22 14:10 RicardoMoraisPOR

Any progress on this? Having the same problem on a new project now

infusion avatar Dec 04 '22 15:12 infusion

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.

nolimits4web avatar Feb 01 '23 11:02 nolimits4web