Navigation

<script>
    jQuery(document).ready(function($) {
        $("#slider-wrapper").transitionSlider({
            // example of navigation options
            navigation: {
                style: 'effect6',
                normal: {
                    color: '#333333',
                    backgroundColor: 'rgba(255,255,255,0.5)',
                    height: '16px',
                    width: '16px'
                },
                hover: {
                    backgroundColor: 'rgba(255,255,255,0.3)',
                    height: '16px',
                    width: '16px'
                },
            },
            keyboard: {
                enabled: true
            }
        });
    });
</script>

Parameter

Type

Default

Description

navigation

object/boolean

true

Object with navigation parameters.

{

style

string

"effect4"

Predefined navigation styles. Values: effect1, effect2, effect3, effect4, effect5, effect6, effect7, effect8, effect9, effect10

normal

object

false

{

width

string

height

string

backgroundColor

string

padding

string

border

string

borderRadius

string

}

hover

object

false

{

width

string

height

string

backgroundColor

string

padding

string

border

string

borderRadius

string

}

}

keyboard

object/boolean

true

Enables navigation through slides using keyboard. Object with keyboard parameters or boolean true to enable with default settings.

{

enabled

boolean

true

Set to false to disable keyboard control.

}

Last updated

Was this helpful?