Going beyond the basics

Splider arrows

The styling options in Splider 2 give you a lot of control over how your arrows look but sometimes you will want to go a bit further than the stack settings allow for. The flexibility of Splider 2 makes this possible.

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