Going beyond the basics

Splider arrows

Going beyond the default settings by harnassing the power and flexibility of Splider 2 stack and the underlying splide.js library.

Custom arrow paths

We can pass in alternative arrow SVG path values to adapt the arrows from the default.

This is the default arrow path

Slide 2

Slide 3

Slide 4

Here is an alternative path

Slide 2

Slide 3

Slide 4

Here is another alternative path

Slide 2

Slide 3

Slide 4

Animating the arrows

By adding a little css we can add some nice effects to show the navigation buttons on hover (for non-touch devices).

Hover over the slider below to see it in action.

Hover over the general slider area

Slide 2

Slide 3

Slide 4

Custom buttons / arrows (External)

There is an API that lets you use some JavaScript to control the slider from code (e.g. via a button). The beauty of this approach is that you can easily place the buttons wherever you like and have them match the rest of your page.

Here we are using a Button group stack

Slide 2

Slide 3

Slide 4

Here we are using 2 SVG stacks

Slide 2

Slide 3

Slide 4

Custom buttons / arrows (Internal)

There is also the option to add some html (via the Splider stack settings) to add custom buttons within the Splider setup - this approach is good if you simply want to replace the Splider arrows with your own icons, images or button code.

Here we are adding simple text buttons

Slide 2

Slide 3

Slide 4

Here we are adding an alternative SVG element

Slide 2

Slide 3

Slide 4

Here we are using images

Slide 2

Slide 3

Slide 4