image
image
image
image

Splider

Source demo

Lightweight and extremely powerful slider stack for RapidWeaver

Splider features

Splider stack comes packed with features including 3 different usage 'modes', complete styling control and numerous additional options. Check out the summary slides below!

layers-2
3 'modes'

Slide, Carousel and Fade

pantone
Style

Extensive styling options

gradient
Sneak peek

Show a glimpse of the next slide

crossroad
3 directions

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

zoom-e
Centre focus

Option to always centre on the active slide

image-2
Lazy load

Option to lazy load added images

fit-horizontal
2 breakpoints

Set up your slides differently for 3 different device sizes

cubes
Any content

Add any of your favourite stacks to the slider

accessibility
Accessible

Of course it is fully accessible too

A perfect fit for Source

Splider can be used in any framework. It is an especially good fit for Source though as it has been developed using the same ethos as Source - i.e. minimal code, no dependencies and all without losing any power or control.

Splider is less than 30KB in size (11kb gzipped) and does not need the likes of jQuery or Font Awesome.

Lightweight

No dependencies

Powerful

Flexible

Use Source colours

Modern

Tap into the Source colour scheme

All Splider elements that can be styled can be set to pick up the Source colour scheme. All of the following colours are available to use for active slides, inactive slides, pagination indicators and the navigation arrows. You can also set each element to pick up the custom colours set in Splider stack - meaning you have full control and flexibility!

Being able to use the Source colours means that all colours will be updated if / when you change your colour scheme in the main Source stack.

Accent

Accent hover

Accent Alt

Secondary

Secondary hover

Secondary Alt

Border

Alt BG

Combine with our Animation stack

Slide content can be animated into view using an animation stack. The example below shows how we could use it to animate in some captions in an image slider.

image

MacBook on a desk

image

A MacBook with a purple glow

image

A half-closed MacBook

What are you waiting for?

Add Splider to your Source projects today to include stunning slider elements on your web pages!