Thought I’d share a big (and free) update to Splider stack (v.1.3) that I have just pushed out. This brings a huge new feature…slider syncing!!
Yes - you can now link 2 Splider stacks together so that they perform in sync. There are countless uses for this kind of thing (e.g. a thumbnail slider or synced feature lists etc). Below is a demo that showcases 3 such uses:
Yes - you can do that by attaching a javascript command (or function) to a button. There are a lot of other things that you can do too: e.g. going directly to a particular slide or even changing options like number of slides visible etc.
At the minute to do any of this you would need the stackID which is a bit of a pain but i’ll push out an update today (or maybe tomorrow) so that it uses an ID set in the stack. I’ll also make a little demo file if I get a chance.
Nice work STH. I particularly like the way this opens up some really interesting content layout options for mobile devices; using the swipe action on one splider to change the content in another.
v1.3.1 available now which allows you to more easily target a Splider stack with some javascript using the Splide API. More details available on the Knowledge Base along with a link to download the project file for the demo shared above.
This functionality is provided as is and is intended for advanced users. I can’t offer support for its use.
If you come up with some nice things to do with this then please share back here. It would be great to see.
1.3.2 out now and brings with it some great new options:
Option to set a custom easing value (for the slide movement) - in Advanced settings. You can use cubic bezier values or standard functions such as linear, ease-in-out etc.
Option to reduce the size/scale of inactive slides (so that active slide is larger)
Option to control the speed that styling transitions are applied
Option to ‘update on move’ which sets the active class prior to the slide moving (as opposed to after it has moved). This will affect when any styling effects are applied.
The ‘Sneak peek 3’ example on the Splider web page demos these. Example project on the Knowledge Base updated with this example too!
If you are enjoying Splider and all of these free updates please leave a quick review.