Splider
Splider is based on an amazing javascript library called 'Splide'. It is an extremely powerful and versatile slider that weighs in at less than 30KB! All sliders on this page were created with Splider.
If you thought you didn’t neeed another slider stack it's time to think again!
Features
Check out some of the amazing options that Splider offers.
(There are so many features we are displaying them using a Splider-built grid layout slider!!)
TL;DR
Splider is by far and away the most feature rich, lightweight, accessible and flexible slider stack available for RapidWeaver / Stacks.
Examples
Sneak peek
Give your webpage visitors a glimpse of what is coming next by letting them see a bit of the next slide.
Sneak peek 2
You can of course do it on both sides too. This is example is set to the default slide behaviour (as opposed to carousel/loop which most of the other examples are using).
Quotes
What about creating some nice looking quotes or testimonials for your product or services?
Sam Smith
Chief engineer
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Sam Smith
Card slider
Add some cards into the slider. Perhaps something like a recent blog posts list.....
A new landscape
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Technology
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curved
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Slits
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integrations
A key component of Splider's power is the fact that you can integrate it with other stacks. And not just by adding those stacks as content to slides but by having certain stacks dynamically generate the slides!
Currently we have support for Poster 2 (the blogging solution by Instacks), Iconic (a gallery stack by Instacks) and Feeds (a dynamic content stack by Weavers Space).
You are not limited to just these stacks though as you can add your own integrations by tapping into Splider's powerful API. Check out our Knowledge Base for more information.
Top to bottom
Who said slide shows should always be left to right?! Not only can you go right to left with Splider you can also go from top to bottom. Great for steps in a process perhaps...
New in v2
In this example we have enabled wheel navigation to allow users to advance through the slides using their mouse wheel. Give it a try!
Slide by many
You can set the sliders up to advance by any number of slides. Here we have set it up for 3 (on large devices).
Get with the style
You can change the shape of the pagination indicators and background of the arrows. Here we have created squares. We have also changed the colours and border of the active and inactive slides.
New in v2!
In Splider 2 we have added an extremely powerful styling system that lets you set up global styles that are inherited by all sliders on the page and also options to override all, or some, of those styles for each instance. There is also additional styling stacks if you are a Source user and even one that allows you to use CSS variables for use with frameworks that make use of them (e.g. Source and F6)!
Autoplay
Set up your sliders to auto-advance. You can even opt to show a progress bar....
New in v2!
Autoscroll
You can even set your slides up to scroll horizontally - smoothly and completely automatically. You can of course still drag the contents around and, by default, the scrolling will pause when the slider receives focus.
Grids
You can even set up your sliders to display in a grid format. It's a really great option for certain types of content!
They can be set to use a regular grid layout (like the one below)...
Or they can be set to use a 'custom array' to make some more interesting layouts!
Synced sliders
You can pair 2 Splider sliders so that one is used as navigation for the other. It's great for building thumnail sliders or for displaying multiple images of your product.
This example also makes use of 'wheel navigation' (for both parts of the synced slider)!
Videos
Here are some example videos.
And new in v2! we are using a trigger to start autoplaying the video when it comes into view (and pause when it leaves). Triggers can also be used to start/stop autoplay and start/stop autoscroll!
Images
Here are some example images. We are using a height ratio (to make them square) and the 'cover' option so that all images adjust to fit in the space.
Support and documentation
Our Knowledge Base is packed full of documentation, tutorials and demo projects.
Real world examples
We have used Splider in a couple of our Source and Source Plus projects to great effect. These demos show you just what is possible with this powerful and flexible slider.
Get Splider 2
You can get this stack on its own or as part of our hugely discounted stacks bundle.
Our stacks bundle includes Splider 2 and ALL of our other stacks that are currently available. Buying as a bundle offers huge savings compared to buying the stacks separately. Currently the bundle consists of the following stacks:
Popular
Splider 2
The only slider stack you will ever need! Powerful, flexible, accessible and really lightweight!
Over 60% off!
Stacks bundle
Get ALL of our stacks in one incredible bundle deal!
October Special
STH_Oct23 during checkout!
FAQs
Below are some of the most common questions about this and our other stacks.
Stack FAQs
General FAQs
Yes this stack has been designed to work in any framework. If you encounter any issues then please contact us with an example and we will do our best to resolve.
All our stacks use only local resources, collect no data and include no calls to remote servers or CDNs etc. As such the stacks are completely GDPR compliant.
We have a full supporting Knowledge Base including articles for all of our stacks and settings. If you can’t find what you need there then do not hesitate to reach out to us via your preferred channel.
