Glide: Feature Request - Option to Control Other Sliders

[rkanson]

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

[unnamedfeeling]

I have managed to "sort of" implement this feature in my project.
You can see the code here - https://gist.github.com/unnamedfeeling/651321e30a7dcc85c82c79123d5d7bf2
I could not find a way to make it work with swipe and click on both sliders, so I temporarily disabled this functionality on a smaller slider

Still it would be great to have native implementation

[kyleatblackfoot]

In case anyone else is wondering about this

````
let glide = new Glide(".js-feature-glide");
let slave = new Glide(".js-feature-background").mount();

glide.on("run", function () {
slave.go(=${glide.index});
});

glide.mount();

````

[hybridvision]

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/

[atlanteh]

If you want both sliders to control each other, here's a snippet that can help you:

  function syncGlide(master, slave) {
    master.on("run", function (e) {
      slave.go(e.direction);
    });
  }
  const glide1 = new Glide('.image-gallery', {...}).mount();
  const glide2 = new Glide('.image-gallery-text', {...}).mount();
  syncGlide(glide1, glide2);
  syncGlide(glide2, glide1);

Note that @kyleatblackfoot solution might show weird behaviour in carousels where the carousel will go sometimes to the right sometimes to the left (Fastest way to go to the specific slide). The solution for this is to use e.direction which will use the clones when neeeded

[jedrzejchalubek]

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: 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: 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!