Forgotten?
image

Coder: Build a slider

Learn how to use a freely available JavaScript library to create a stunning, powerful slider in RapidWeaver

image

A fantastic introduction to 'coding' inside RapidWeaver and Stacks

In this course (with over 50 tutorial videos!) we will look at adding freely available code into RapidWeaver allowing us to build a fantastic, modern slider.

This is a great introduction to implementing code of this type into RapidWeaver. It gives you full control of every possible feature included with the library. And, of course, when you know how to implement a library such as this into RapidWeaver then you will be able to use this same knowledge with other usefeul code too.

What it covers


Accessing code repositories on GitHub

There are lots of freely available code libraries hosted on GitHub. Here we look at a fantastic one to create powerful sliders!

Downloading code from GitHub

Once you have found code that you want to use you need to check the license for it and then download it

How / where to add the required files into RW

We need to add the code into RapidWeaver so that it is available to use on our pages

Linking your page to 'call' the required code

On the pages that you want the slider you need to link the page to the added code

Creating the html structure for our slider

We need to structure the HTML in a particular way (and with particular classes) for the slider to work

Transforming our html structure to allow you to drop Stacks content into slides

Here we look at a way to allow us to drop in stacks as our slide content - effectively making your own pseudo-stack!

'Initialising' the slider with javascript

We also look at using some of our own JavaScript to get the slide up and running

Passing slider options into the code (via javascript and data attributes)

There are countless options that we can pass into the slider to control every aspect of its behaviour

Styling the slider with themes and CSS

We take a look at the built in themes and also how to customise them with some CSS

Using additional slide types (image, video)

We can add in specialised slide types to deal with images and videos etc!

The reviews are in....

Not seeing the testimonials?

You need to accept experience enhancement cookies for these to be displayed!

Splider stack

Our very popular 'Splider' stack is built upon the same JavaScript library that we use in this course. It's an amazingly powerful stack.

Virtually all of the features that you see detailed on the Splider example pages are covered in this course.

Coder: Build a slider course includes a 50% off coupon code for Splider stack!

Enrol now

Get coding in RapidWeaver and Stacks! This will not only give you a fully working slider but also the skills and knowledge to do more of this kind of thing with other code!