keen-slider
keen-slider copied to clipboard
Possible to change the slide while specifying which direction the transition should move?
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?
You can enable loop: true
and call slider.next()
instead of moveToIdx
.
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!!
@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?
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()
.