question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request - Option to Control Other Sliders

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:15
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
hybridvisioncommented, Jun 25, 2020

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/

1reaction
jedrzejchalubekcommented, Aug 31, 2020

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Designing The Perfect Slider - Smashing Magazine
On Tylko, the slider is complemented with a segmented control — options displayed as the users hovers or taps over the product areas....
Read more >
[Feature Request] More Flexible Slider & Tabs
[Feature Request] More Flexible Slider & Tabs ... Same with Tabs - it would be nice to be able to place tabs anywhere...
Read more >
Slider Question - Qualtrics
Qtip: Respondents can select “0” stars on a slider question by doing the following: set the Interaction to Continuous to be able to...
Read more >
Graphic EQ (sliders) and two other things - Feature requests ...
Basically, I have folders of profiles in Rig Manager for each guitar and when I'm editing one of those profiles, I don't want...
Read more >
An option to have Scaler not stealing a mixer slider - Feature Requests
The problem is that the AKAI sliders have no labels or lamps that let you understand what exact lane/instrument you are controlling: this...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found