Synced sliders - big update to Splider stack available now!

Shaking The Habitual
1

Hi all,

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:

See sync examples

Project file available on our Knowledge Base page.

I can’t wait to see what kind of things you build with this great new feature.

Enjoy!

Stuart

p.s. Not got Splider yet? Get 20% off with the code splider-sync until 30th Sept!

6 Likes
2

Cracking update to Splider and well done for making the syncing of 2 sliders so simple.

This opens up many new display opportunities and information/images presentation where Splider is the solution.

1 Like
3

Can Splider use external buttons to advance the slides?

4

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.

3 Likes
5

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.

1 Like
6

Exactly.

1 Like
7

Can you show an idiot like me how this works?

8

Absolutely. I’ll wait until I push out the update though because the variable that is used is going to change (to make it easier).

2 Likes
9

Excellent, thanks

10

Here is a sneak peek of some of the things that are possible.

4 Likes
11

Speechless! Can’t wait for the update… :-)

1 Like
12

That’s fking fanbloodytastic

1 Like
13

Very cool indeed. Well done!

1 Like
14

Splider has now become a very elegant way to create an image or product gallery.

1 Like
15

Hi all -

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.

Enjoy!

1 Like
16

Hi all -

Third update in a week for Splider!

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.

17

Loving the Sneak Peak 3 demo and also how effective the final Splider on the page is, as a way to draw attention to something.

1 Like