Introducing.....Splider 2

Introducing…Splider 2

I am delighted to announce the release of Splider 2! I have completely reworked Splider 1 to give you direct access to the full power of the amazing splide.js library. The result is the most accessible, most modern, most powerful and most lightweight slider stack available for RapidWeaver and Stacks!

Calling it just a ‘slider’ stack though does it a huge injustice as Splider 2 is an absolute powerhouse of a stack that can function in countless ways. With it you can create sliders, carousels, autoscrolling content, full page screens, synced sliders, grid layouts and way more!

New features

Improved Accessibility

Sliders are notoriously problematic for accessibility. With Splide that is no longer the case as every aspect of accessibility has been considered and implemented. You can now even translate/customise all of the aria-labels and descriptions used to better suit the needs of your audience (and/or the purpose of the slider).

Flexible and efficient styling options

  • Global styling options: Set your styles once and let all Spliders on the page inherit these settings
  • Instance styling options: Set / override styling options for each individual Splider instance
  • Source integration: Set Splider to pick up the colours defined by Source framework (these can also be set to be global or by instance)
  • CSS variables: Use a framework (such as F6 and Source) that set your colour choices against CSS variables? You can now set these variables to be applied to Splider components (again, globally or by instance)

Wheel navigation

You can now allow the mouse wheel (or trackpad) to trigger the slide progression. It’s especially great for top-to-bottom full page presentations (see demo) but works with any type of Splider slider.

New ‘free’ drag mode

For each of your sliders you can enable the slides to be draggable in the standard way or in the new ‘free’ mode.

Autoscroll

The new Autoscroll function allows you to set your slides to continually and smoothly scroll across your page. This differs from ‘autoplay’ in that the slides do not pause each time they are brought into focus.

Triggers

You can now set Autoplay, Autoscroll and even videos to start and stop when the slider enters or exits the viewport!

Advanced options for developers

Splider 2 lets you tap into the full power of the splide.js library. With this (and a little knowledge of html/ css/ javascript ) you are able to take Splider to completely new levels!


View Splider v2 demo

Find out more about Splider


Splider 1 owners can upgrade for 50% off using the code displayed in the latest version of Splider 1 (v1.5.3+).

Anyone who has bought Splider 1 this year (standalone or in a bundle) can get it completely for free. I will be sending emails to all qualifying email addresses in the next few days.

New to Splider? You can get 20% off with the code splider2.

Enjoy!

Thanks,
Stuart

6 Likes

Just when you think Splider could not get any better, Splider2 gets released.

This is a significant new slider that every stacks users should get. It does absolutely everything and so much more.

The Improved Accessibility is really significant. With Stacks we can now build a proper slider that doesn’t trigger alarm bells when checking the accessibility of a page.

1 Like

It’s maybe not the most exciting feature but it is hugely important. Splider 2 even lets you translate/customise all the various aria-labels that are used in the underlying html so that they are appropriate for the audience (and purpose of the slider - e.g. you could use ‘Go to next article’ instead of ‘Go to next slide’ etc).

2 Likes

Great update!

You know @TemplateRepo still wants the Gallery 3 integration 😄👍

1 Like

He does :-)

2 Likes

It’s the very next thing on my list of Todos! Will be in touch shortly…😁

4 Likes

Looks like a very impressive piece of work by Stuart. But just when you think that Splider can’t get any better… well, there is Splide Premium! 😉

1 Like

Indeed. The effects are great. Lots you can do when you throw three.js at something :)

1 Like

instant upgrade …Thx:)

1 Like

It is magnificent. I already implemented it. My Taco restaurant customer loves it :-) Very easy to set up and use. We are using the continuous setting without controls so that it appears as a band of images moving perpetually. If you grab it with your cursor, you can actually “throw” it so it picks up the momentum from your cursor movement, and then it gradually loses speed like there is some kind of inertia. Beautiful…

3 Likes

I’m liking the ability to use CSS Variables and how this has been implemented. As always, leading the way showing how things can be improved. This is definitely the right direction for stacks.

Thanks Gary. Yes it’s a good way of tying things in with existing colours. Main reason for adding it was really for F6 users but it is of course something that anyone can use if it suits!

NEW DEMO!!

I have created a tutorial project that shows how you can set Splider 2 up to use your own custom arrows. I was going to add some of this kind of thing into the stack but I wanted to limit as much as possible how many settings there were. I made Splider 2 in such a way though that things like this are possible and open to you as users (at least they are when you know what to do. Hence this demo…)

View demo: Custom arrows | STH Demos

Download project: splider-2_arrows.rw8.zip - Droplr

(Note: the demo needs Source Addon stacks. Apologies if you don’t have them. I will try and make a version using only the free Source stacks too when i get a chance)

Enjoy!

3 Likes

When adding an SVG path, do you add a left or right symbol to the data attribute?

right - it then gets flipped for use at the left. i should add that info in…

1 Like

Works great.

Here’s one I made:
"arrowPath":"M40,20.2 L17.44,39.4 L17.44,27.88 L0,27.88 L0,12.52 L17.44,12.52 L17.44,1 L40,20.2 z M20.16,33.48 L35.84,20.2 L20.16,6.92 L20.16,15.24 L2.72,15.24 L2.72,25.16 L20.16,25.16 L20.16,33.48 z"

1 Like

Good stuff!

I should say…this particular method of changing the arrows is also supported in Splider 1!

Splider2 gets full marks from Google PageSpeed Insights, too.

@habitualshaker is it possible to configure so that the active slide is larger than the inactive ones? (if not, is that a potential update?).