Feature Request - Option to Control Other Sliders
See original GitHub issueSlick has an option to allow multiple sliders to stay in sync with each other that’d be cool to have in Glide.
Slick does it like this:
asNavFor: '.element',
In the interest of not stealing the exact wording / making it a little easier to understand, I propose doing something like this:
controlledBy: '.element',
Example: You have 2 sliders, 1 for background images and 1 for text on top. You can pass “controlledBy” to the background image slider, and then whenever the text on top changes, the image slider changes with it.
Currently achieving a similar effect by having an event listener on the main slider, and on the “move” event, getting the index of the new slide and moving the second slider to the same index. Similar example below.
Extra notes / thoughts:
- Disabling drag / swipe by default for the slider than gets this option?
- If one slider has more slides than the other, doing some overflow math to loop the smaller one.
- Example: Slider 1 has 4 slides, Slider 2 has 6. Slider 1 is the one with “controlledBy” Slider 2. Slider 2 goes to slide 5, so Slider 1 goes to slide 1. Slider 2 goes to slide 6, Slider 1 goes to slide 2. Then when Slider 2 wraps, not sure if it should make Slider 1 rewind to Slide 1, or continue.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:15
- Comments:5 (1 by maintainers)
I was going down this path but wasn’t satisfied until I came across what I consider to be an excellent all round replacement for Slick / GlideJS et al: https://splidejs.com/ - apart from the strange name, it’s really well written and documented. Well worth checking out!
There’s even a tutorial for having a synchronised sliders: https://splidejs.com/thumbnail-slider/
Looks great, can be recommended! However, the codebase and structure looks oddly familiar, it is highly inspired by Glide 😄 Which is a nice thing!