SPLIDER 2
An overview of the brand new features that take the best slider stack for Stacks / RapidWeaver to a whole new level!
New in v2!
Styling overrides
Of course you may want to style your sliders differently and so you can set styles to apply to particular instances of Splider!
In addition, if you are a Source framework user then you can easily apply the colours you have set up in that to style the components of your slider! And if your theme / framework makes use of CSS variables to set colours (e.g. F6) then there is an additional stack included that even lets you tap into these colours!
New in v2!
Wheel navigation
You can enable the slides to be traversed by the user's mouse wheel (or trackpad). The option stops the mouse controlling the vertical scrolling of the page and instead advances the slides - until they are done at which point your mouse automatically regains control of the page scrolling! It makes most sense to use this with top-to-bottom sliders but it can actually be used for any!
Use your mouse / trackpad to navigate through these slides.
Full screen
This functionality, of course, is particularly useful for full screen slide shows.
New in v2!
Autoscroll
Have your slides smoothly scroll across the screen! They (by default) will pause when hovered over and you can, of course, drag the slider left or right too and/or use the navigation arrows! It's a really slick approach to present your content in this kind of way.
New in v2!
Accessibility
The underlying splide.js library is the most accessible slider available (most sliders are notoriously poor in terms of accessibility). It sets up all required aria labels to all aspects of the slider and allows for full keyboard navigation.
Try it out: Hit Tab on your keyboard and navigate through the page by tabbing (and using Enter on arrows and Keyboard arrows on pagination to traverse through the slides!
New in v2!
Triggers
Also in v2 we have included the option to trigger certain actions when your slider moves into (or out of) the viewport.
You can for example:
- start/pause Autoscroll
- start/pause Autoplay
- start/pause Video slides
...and much more besides, like some advanced options to create your own custom arrows!!
No - you cannot use both versions of Splider on a single page. If you want to add Splider 2 to an existing page that has a Splider 1 stack on it then consider migrating that version across into Splider 2.
All slides within your Splider 1 stacks (with the exception of Video slides) can simply be selected and dragged from Splider 1 into a Splider 2 stack.
In addition you will need to replicate all required settings. As styling has been separated out from the main Splider stack in v2 you can now make global / shareable styles so that the re-styling of your sliders may need to only be done once.
Yes - of course!
- If you bought Splider 1 any time in 2022 (inlcuding in a bundle deal) then you can get it for FREE!*
- If you bought Splider 1 before 2022 then you can get a 50% discount**
- If you are completely new to Splider then you can get a 20% discount with the code
splider2until the end of June 2022.
* If you haven't received an email by 12th June 2022 please contact me with your purchase details.
** Discount code can be found in the latest version of Splider 1 stack (1.5.3).
Yes - the download comes with a demo project file (including this page) that outlines some key settings and also provides direct access to our documentation pages.
In addition we have fully updated the documentation for Splider over on our Knowledge Base.
This page has been built with Source micro framework