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.
Demo 2
Settings: type: carousel perPage:3 (2 on small) focus: center
Demo 3
Settings: padding-right
A 'live' version of this approach is used for the Examples slider on the Source home page.
Demo 4
Settings: direction: top-to-bottom
Demo 5
Settings: autoplay: true progressIndicator
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!!