Splider

Our amazing lightweight and super powerful slider stack.

Splider quick start

Splider offers a lot of power and flexibility and, as such, Splider stack contains a lot of customisation settings. If you are new to Splider this may be a bit overwhelming at first. This quick guide though will take you through the key settings t...

Splider 2 Extensions

Splider stack offers a number of extensions that are available to you to extend what is possible from the default settings. These aren't enabled by default as they all require additional code to be added to the page (albeit a very small and effici...

Splider 2 styling

Splider 2 offers a very powerful and flexible way of styling your sliders. There are 4 dedicated styling stacks and these are accessed from the 'Splider styling' section of Splider stack (as shown in image below). Note: You will only see the 'Sour...

Splider slide

The default Splider child stack allows you to add any content that you wish to a slide. In addition, the slide stack itself allows you to: Add a custom class (useful if you wish to target a particular slide with your own custom CSS) Override the ...

Splider Video slide type

There is a designated slide type for video and it allows you to link to videos on Youtube, Vimeo or your own self-hosted ones. Note: If using the video slide type then you must select the option to 'Enable video' in the parent Splider stack.  This...

Splider Image slide type

Splider has its own image stack that is designed to work with Splider. Settings You can opt to add a custom class name(s) if you want to target this particular slide with some custom css. You can opt to add either a warehoused image (by providing ...

Splider 1 stack settings (Archive)

Splider is an extremely powerful slider stack. You can find out about the settings in the article below. Slider setup Mode You can select from the following options: Slide (default) - This option acts as a regular slider. Moving from the first sl...

Splide course

Over on the Shaking the Habitual Academy we have a course that will show you how to incorporate the Splidejs code into RapidWeaver yourself (without a dedicated stack!).  Being able to do this gives you a lot more options than using a stack does. ...

Splider 1 project file (archive)

Below is a download link for a RapidWeaver 8 project file demonstrating various uses of Splider - including most of the examples on the Splider home page. The project file uses the free Source stacks. Using Source lets us use some nice styled ...

Splider aspect ratio slides

A really nice option with Splider is the ability to set your slides to have a fixed aspect ratio. You can set a different aspect ratio for each breakpoint (e.g. 16:9 on desktop and 1:1 on mobile). Here are some tips when using aspect ratio slides:...

Syncing Splider stacks

It is possible to synchronise 2 Splider stacks so that 1 Splider stack acts as the 'navigation' for a second Splider stack. This has various uses but the most obvious one might be to build a 'thumbnail slider'. Visit this demo page for a few dif...

Splider API

Splider is built upon splidejs which offers an API to enable you to extend functionality by using your own javascript. As of v1.3.1 of Splider stack this functionality is now available to you to implement in your RW projects. Here is a demo pag...

Poster 2 integration (Splider)

It is possible to use Splider to display posts from Poster 2 (by Instacks) in a slider format.  Demo 1 | Demo 2  For Splider to work with Poster 2 you need to: Select 'Splider' as the 'Layout' option in the Poster 2 main stack Drop Splider sta...

Splider grids

Splider offers the option of displaying your slides in a grid format. View demo . Splider grid settings If you want a Splider instance to be set out in a grid format then you first need to 'Show grid settings' using the option in the 'Extension -...

Splider url hash

(Since v1.5) Splider provides the option of giving any slide an ID/Hash value. What this then allows is for a particular slide (or slides) to be brought into view by passing in a hash value to the url. This can be extremely useful if you want cert...

Migrating a slider from Splider v1 to Splider v2

If you want to migrate an existing slider that has been built using version 1 to version 2 then there are few features of Splider 2 that will help the process. Slides Splider 2 can use the same 'Stacks slide' and 'Image slide' child stacks as vers...

Iconic gallery integration (Splider 2)

Details around how to present images from Instack's Iconic gallery stack in Splider