keen-slider icon indicating copy to clipboard operation
keen-slider copied to clipboard

Possible to change the slide while specifying which direction the transition should move?

Open gavin310 opened this issue 2 years ago • 4 comments

On a looped slider with 6 slides, when I'm on the 6th slide I'd like to be able to call $slider.moveToIdx(0) but have the transition move forward 1 slide instead of rewinding all the way to the first slide. Is there any way to accomplish this without reworking the core code?

gavin310 avatar Jan 25 '23 10:01 gavin310

You can enable loop: true and call slider.next() instead of moveToIdx.

rockmandash avatar Jan 25 '23 11:01 rockmandash

Hey @rockmandash thanks for response! Your suggestion would accomplish what I asked, but I didn't explain the actual scenario well enough. Sorry about that. The actual scenario is I'm programmatically syncing two sliders. Both sliders are looped. On the first slider, let's say I drag from right-to-left and go from slide 5 to slide 2 (so it goes 5, 6, 1, 2 because it's looped). I'd then like to tell the 2nd slider to also go from slide 5 to slide 2, but I want it to slide from right-to-left like the first slider did. Instead, calling $slider.moveToIdx(1) will reverse the second slider back to slide 2.

This is why I asked about having to modify the core code, because I don't see any way to tell the slider to move to a certain index in a certain direction, e.g. $slider.moveToIdx(0, 'right-to-left' ). I'm assuming there's no way to do this, but if you have any ideas that would be extremely helpful. Thanks!!

gavin310 avatar Jan 25 '23 12:01 gavin310

@rockmandash Actually, I just noticed the slider.next function has this:

slider.moveToIdx(slider.track.details.abs + 1, true)

Do you happen to know off the top of your head if doing slider.track.details.abs + x would move the slider forward by x amount of slides?

gavin310 avatar Jan 25 '23 12:01 gavin310

You could use slider.next() four times to meet your goal, but you can't do so at the same time, and the function isn't async, thus the only way to know the slider.next() has finished, you must hook it to the event hooks, such as animationEnded or animationStopped, which can be found in the documentation, so that after the animation has ended, you may continue calling slider.next().

rockmandash avatar Jan 25 '23 15:01 rockmandash