BUILD A SLIDER

Splide

There is a fantastic new javascript slider/carousel library available that is open-source, lightweight and extremely powerful. It is called 'Splide'. I encourage you to check it out.

If you are familiar with html, css and a little javascript then you should have a go at trying to integrate this code into a RapidWeaver project. There is great documentation available and it takes you through the steps to set up sliders and to apply different options to it.

A slider stack (Splider) based on this code is available (from Shaking the Habitual) but there is an alternative (and a more powerful, flexible!) way to incorporate this great slider into Rapidweaver.....

Academy course

If you are new to dealing with code then there is an alternative approach. Over on the RapidWeaver Academy we have a full video course dedicated to setting up Splide sliders in RapidWeaver. We cover all of the following areas:

  • Downloading the library
  • Adding the library files into RapidWeaver
  • Linking to the files from our RapidWeaver pages
  • Building the slider structure
  • Customising slider options
  • Setting up Stacks drop-zones so that you can add ANY stacks as slide content
  • Styling the sliders
  • Extending the sliders with available extensions (for video, urls etc)

This really is a great introduction into adding code to RapidWeaver. Not only that you will end up with quite possibly the most powerful, flexible and lightweight slider in your whole stacks collection!

Demos

Below are some example sliders built in RapidWeaver using this library. Many more examples are available on the Splide web page (all of which can easily be replicated once you know how!).

Demo 1

Default settings used.

01

02

03

04

05

06

Demo 2

Settings: type: carousel perPage:3 (2 on small) focus: center

01

02

03

04

05

06

Demo 3

Settings: padding-right

A 'live' version of this approach is used for the Examples slider on the Source home page.

01

02

03

04

05

06

Demo 4

Settings: direction: top-to-bottom

01

02

03

04

05

06

Demo 5

Settings: autoplay: true progressIndicator

image
image
image
image
image
image

Pros and cons

Obviously, initially at least, it would be easier for you if I simply made this into a stack and sold it to you. However, besides a very short initial learning curve there are a lot of advantages to you for going with an approach such as this. The following tables attempt to highlight some of these.

Pros

Fast

It is quicker to add / edit settings to control the slider directly in code as opposed to via stack settings


Efficient

Using raw code is much faster than using stacks (as no stack's settings / logic needs to be processed when previewing / publishing).


Totally flexible

Stacks have to limit what options are included. Not so when you do it yourself!


Cost effective

This course costs less than what a stack based on this library would likely cost. And it's more powerful. A no brainer!!


Transferrable learning

Once you know how to incorporate code like this you can do the same thing with other code (or on other platforms outside of RW!).

Cons

Harder setup

Initially it takes a bit more work to set up the files etc than simply dragging a stack onto a page


Initially intimidating

Dealing with code may be intimidating for beginners but you will soon see that everything is very logical and it will soon make sense

Sound good?

If this approach sounds good to you and you fancy flexing your coding skills a little then sign up now and we'll see you in the RapidWeaver Academy. You'll be adding amazing sliders like this into your RapidWeaver projects in no time!!