image

image

Splider 2

Slider stack

The only slider stack you will ever need! Powerful, flexible, accessible and really lightweight!

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!!)

pantone
Style

Extensive styling options. And new in v2 - there is the option for global styling!

layers-2
3 'modes'

Slide, Carousel and Fade

gradient
Sneak peek

Show a glimpse of the next slide

arrows
3 directions

Left to right, right to left and...top to bottom!

compress-arrows-alt
Centre focus

Option to always centre on the active slide

image-polaroid
Lazy load

Option to lazy load added images

phone-laptop
2 breakpoints

Set up your slides differently for 3 different device sizes

cubes
Any content

Add any of your favourite stacks to the slider

universal-access
Accessible

Of course it is fully accessible too.

images
Image slides

A dedictated slide type lets you create image slides easily

video-plus
Video slides

A dedictated slide type lets you create video slides easily (self-hosted, Vimeo or YouTube!)

grid-view
Grid layout

Layout your slides in a grid (like this one!)

link

Link to particular slides directly from the url

arrows-alt-h
Auto / Infinite scroll

Set your slides to automatically (and smoothly) scroll across the screen

chart-network
Integrations

Create slides from stacks that generate dynamic content (e.g. Poster 2, Iconic gallery and Feeds stack)

cogs
Advanced options

There is a full API (and other advanced options) available with Splider that will let developers do amazing things.

image
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.

Item 1

Item 2

Item 3

Item 4

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).

Item 1

Item 2

Item 3

Item 4

Splider has 3 modes: Slides, Carousel and Fade!
Splider has 3 directions: Left to right, Right to left and Vertical!
Splider is perfectly responsive
Splider has extensive styling options
....and YES. This silky smooth slider was built with Splider too 😀

Quotes

What about creating some nice looking quotes or testimonials for your product or services?

image
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.

Amazing product!

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
Chief Dog

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.

image

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.....

image
A new landscape

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

image
Technology

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

image
Curved

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

image
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!

Step 1: Download Splider

Do yourself a favour and take advantage of this crazy pricing!

Step 2: Install Splider stack

Add it to RapidWeaver.

Step 3: Drag Splider onto a new project page

Experiment with all of the goodness.

Step 4: Be amazed

You'll soon be wondering what you did before Splider!

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).

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

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.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

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....

image
image
image
image
image

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.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

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)...

01

02

03

04

05

06

07

08

09

10

Or they can be set to use a 'custom array' to make some more interesting layouts!

01

02

03

04

05

06

07

08

09

10

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)!


01

02

03

04

05

06

07

08

09

10

01

02

03

04

05

06

07

08

09

10

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!

image
image
image
image
image
image
image

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:

  • Grid Enabler
  • Magic Mouse
  • Magic Mouse 2
  • Markdown Link
  • Parallaxer
  • Scroller Plus
  • Source Addons
  • Splider 2


Popular

image

Splider 2

The only slider stack you will ever need! Powerful, flexible, accessible and really lightweight!

Over 60% off!

image

Stacks bundle

Get ALL of our stacks in one incredible bundle deal!

March Special

Get an additional 20% off our Stack bundle!! Add discount code: STH_Mar24 during checkout!

FAQs

Below are some of the most common questions about this and our other stacks.

Stack FAQs

There are no specific FAQs for this stack at this time. See our general FAQs below. If you have a particular question about this stack then please get in touch.


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.

The whole site has been built with Source micro framework. In addition, this page also uses (obviously). Finally, this FAQ section has been built with Toggle stack and the Bundle details section above uses Moreish stack.

Source Icon

Built with Source