Create Custom Stop Play and Navigation Buttons

This article is now outdated!

For version 5.0+, this can now be easily achieved with Static Layers and Actions.

Preparing Basic Settings

To use Custom Navigation styling of the bullets, navigation buttons open the slider settings and change the Navigation Style to Custom.

setnavigationtocustom

To add custom Stop and Play buttons, we will need to enable the Static Layers in the Slider settings:

enablestaticlayers

Preparing Basic Settings

To use Custom Navigation styling of the bullets, navigation buttons open the slider settings and change the Navigation Style to Custom.

setnavigationtocustom

To add custom Stop and Play buttons, we will need to enable the Static Layers in the Slider settings:

enablestaticlayers

 Creating Static Layers as Play and Pasue buttons

Once this done, we need to create the Buttons in the Static Layers with adding a Layer with the following Markup i.e.:

Make sure you set the Layer visibility from the first slide to the last slide.

selected slides

The Classes .playstopholder and .playstopbutton will help us to style the slider, and the id’s  #mypausebutton and #myplaybutton will help us to controll the Slider API.

Note ! In the Backend we will not see the style elements, however it is ok, since the style addon  will come due some custom stylesheet in the slider settings.

 Styling the Elements

Open the Slider Settings and add the following style settings to the Custom CSS Field to style your Play / Pause buttons:

To Style the Bullets and navigation buttons, please extend the Custom CSS Field with the following settings:

Adding the jQuery functions

We are waiting till the Slider is loaded, and make sure that the click events act always, also it the button has beed removed/readded etc during the runtime.