Navigation Syntax – ThemePunch

Navigation

is defined inside the slider's JavaScript settings, shown in #7 here:
https://www.themepunch.com/revsliderjquery-doc/anatomy-basic-slider/#javascript-settings

Keyboard/Mouse
Arrows
Bullets
Tabs
Thumbs
Touch
Combination Example
Full Script Example

Keyboard / Mouse

navigation: {

    keyboardNavigation: 'on',
    keyboard_direction: 'horizontal',
    mouseScrollNavigation: 'on',
    mouseScrollReverse: 'reverse',
    onHoverStop: 'on',

},

keyboardNavigation

Choose to enable arrow keys to navigate between slides.

keyboard_direction

horizontal
vertical

Control the slider with left/right or up/down keys.

mouseScrollNavigation

Capture mouse-wheel movement to change between slides.

mouseScrollReverse

normal
reverse

Reverse the direction that the slides change when the mouse-wheel is used.

onHoverStop

Choose if the slider's progress should pause when hovering the slider with your mouse.

Arrows

navigation: {

    arrows: {

        enable: true,
        style: 'hesperiden',
        tmp: '',
        rtl: false,
        hide_onleave: false,
        hide_onmobile: true,
        hide_under: 0,
        hide_over: 9999,
        hide_delay: 200,
        hide_delay_mobile: 1200,

        left: {
            container: 'slider',
            h_align: 'left',
            v_align: 'center',
            h_offset: 20,
            v_offset: 0
        },

        right: {
            container: 'slider',
            h_align: 'right',
            v_align: 'center',
            h_offset: 20,
            v_offset: 0
        }

    }

},

enable

true
false

Enable Arrow navigation.

style

The style template for the Arrows. View the Navigation Styles document for examples, and also the "examples/Navigation" folder in the plugin's original source for live previews.

tmp

Additional markup included for certain navigation styles.

rtl

true
false

Set to "true" for right-to-left-language websites. Otherwise use "false".

hide_onleave

true
false

Set to "false" to always show the Arrows. Or "true" to only show the Arrows on mouse-over.

hide_onmobile

true
false

Hide Arrows on mobile devices.

hide_under

Choose to hide the Arrows under a certain screen width.

hide_over

Choose to hide the Arrows over a certain screen width.

hide_delay

A delay in milliseconds for how long the Arrows will take to fade out when "hide_onleave" is set to "true".

hide_delay_mobile

The amount of time in milliseconds before the navigation fades out of view after a "tap" occurs on mobile devices.

left

Options for the Left Arrow

container

slider
layergrid

Align the Arrow to the entire slider or to the Layers Grid.

h_align

left
center
right

The horizontal alignment.

v_align

top
center
bottom

The vertical alignment.

h_offset

The horizontal alignment offset in pixels.

v_offset

The vertical alignment offset in pixels.

right

Options for the Right Arrow

container

slider
layergrid

Align the Arrow to the entire slider or to the Layers Grid.

h_align

left
center
right

The horizontal alignment.

v_align

top
center
bottom

The vertical alignment.

h_offset

The horizontal alignment offset in pixels.

v_offset

The vertical alignment offset in pixels.

Bullets

navigation: {

    bullets: {

        enable: true,
        style: 'hesperiden',
        tmp: '',
        direction: 'horizontal',
        rtl: false,

        container: 'slider',
        h_align: 'center',
        v_align: 'bottom',
        h_offset: 0,
        v_offset: 20,
        space: 5,

        hide_onleave: false,
        hide_onmobile: false,
        hide_under: 0,
        hide_over: 9999,
        hide_delay: 200,
        hide_delay_mobile: 1200

    }

},

enable

true
false

Enable Bullet navigation.

style

The style template for the Bullets. View the Navigation Styles document for examples, and also the "examples/Navigation" folder in the plugin's original source for live previews.

tmp

Additional markup included for certain navigation styles.

direction

horizontal
vertical

Choose if the Bullets should be placed next to or on top of one another.

rtl

true
false

Set to "true" for right-to-left-language websites. Otherwise use "false".

container

slider
layergrid

Align the Bullets to the entire slider or to the Layers Grid.

h_align

left
center
right

The horizontal alignment.

v_align

top
center
bottom

The vertical alignment.

h_offset

The horizontal alignment offset in pixels.

v_offset

The vertical alignment offset in pixels.

space

The spacing in pixels between the Bullets.

hide_onleave

true
false

Set to "false" to always show the Bullets. Or "true" to only show the Bullets on mouse-over.

hide_onmobile

true
false

Hide Bullets on mobile devices.

hide_under

Choose to hide the Bullets under a certain screen width.

hide_over

Choose to hide the Bullets over a certain screen width.

hide_delay

A delay in milliseconds for how long the Bullets will take to fade out when "hide_onleave" is set to "true".

hide_delay_mobile

The amount of time in milliseconds before the navigation fades out of view after a "tap" occurs on mobile devices.

Tabs

navigation: {

    tabs: {

        enable: true,
        style: 'zeus',
        tmp: '<span class="tp-tab-title">{{title}}</span>',

        width: 100,
        height: 50,
        min_width: 100,
        visibleAmount: 5,
        rtl: false,

        direction: 'horizontal',
        position: 'inner',
        space: 5,
        h_align: 'center',
        v_align: 'bottom',
        h_offset: 0,
        v_offset: 20,

        span: true,
        wrapper_padding: 0,
        wrapper_color: 'transparent',
        wrapper_opacity: '0',

        hide_onleave: false,
        hide_onmobile: true,
        hide_under: 640,
        hide_over: 9999,
        hide_delay: 200,
        hide_delay_mobile: 1200

    }

},

enable

true
false

Enable Tab navigation.

style

The style template for the Tabs. View the Navigation Styles document for examples, and also the "examples/Navigation" folder in the plugin's original source for live previews.

tmp

Additional markup included for certain navigation styles.

width

The default tab width in pixels

height

The default tab height in pixels

min_width

The minimum width to maintain for each tab

visibleAmount

The total amount of tabs to show at any given time inside the tabs main container.

rtl

true
false

Set to "true" for right-to-left-language websites. Otherwise use "false".

direction

horizontal
vertical

Choose if the Tabs should be placed next to or on top of one another.

position

inner
outer-left
outer-right
outer-top
outer-bottom

Choose whether the tabs should be placed inside or outside of the main slider.

space

The spacing in pixels between the Tabs.

h_align

left
center
right

The horizontal alignment.

v_align

top
center
bottom

The vertical alignment.

h_offset

The horizontal alignment offset in pixels.

v_offset

The vertical alignment offset in pixels.

span

true
false

The display property for the Tabs' main container. Choose "true" for "block", and "false" for "inline-block".

wrapper_padding

The CSS padding for the Tabs' main container.

wrapper_color

The background-color for the Tabs' main container.

wrapper_opacity

The background opacity for the Tabs' main container

hide_onleave

true
false

Set to "false" to always show the Tabs. Or "true" to only show the Tabs on mouse-over.

hide_onmobile

true
false

Hide Tabs on mobile devices.

hide_under

true
false

Hide Tabs on mobile devices.

hide_over

Choose to hide the Tabs over a certain screen width.

hide_delay

A delay in milliseconds for how long the Tabs will take to fade out when "hide_onleave" is set to "true".

hide_delay_mobile

The amount of time in milliseconds before the navigation fades out of view after a "tap" occurs on mobile devices.

Thumbs

navigation: {

    thumbnails: {

        enable: true,
        style: 'zeus',
        tmp: '<span class="tp-thumb-image"></span><span class="tp-thumb-title">{{title}}</span>',

        width: 100,
        height: 50,
        min_width: 100,
        visibleAmount: 5,
        rtl: false,

        direction: 'horizontal',
        position: 'inner',
        space: 5,
        h_align: 'center',
        v_align: 'bottom',
        h_offset: 0,
        v_offset: 20,

        span: true,
        wrapper_padding: 0,
        wrapper_color: 'transparent',
        wrapper_opacity: '0',

        hide_onleave: false,
        hide_onmobile: true,
        hide_under: 640,
        hide_over: 9999,
        hide_delay: 200,
        hide_delay_mobile: 1200

    }

},

enable

true
false

Enable Thumbnail navigation.

style

The style template for the Thumbnails. View the Navigation Styles document for examples, and also the "examples/Navigation" folder in the plugin's original source for live previews.

tmp

Additional markup included for certain navigation styles.

width

The default Thumbnail width in pixels

height

The default Thumbnail height in pixels

min_width

The minimum width to maintain for each Thumbnail

visibleAmount

The total amount of Thumbnails to show at any given time inside the Thumbnails main container.

rtl

true
false

Set to "true" for right-to-left-language websites. Otherwise use "false".

direction

horizontal
vertical

Choose if the Thumbnails should be placed next to or on top of one another.

position

inner
outer-left
outer-right
outer-top
outer-bottom

Choose whether the Thumbnails should be placed inside or outside of the main slider.

space

The spacing in pixels between the Thumbnails.

h_align

left
center
right

The horizontal alignment.

v_align

top
center
bottom

The vertical alignment.

h_offset

The horizontal alignment offset in pixels.

v_offset

The vertical alignment offset in pixels.

span

true
false

The display property for the Thumbnails' main container. Choose "true" for "block", and "false" for "inline-block".

wrapper_padding

The CSS padding for the Thumbnails' main container.

wrapper_color

The background-color for the Thumbnails' main container.

wrapper_opacity

The background opacity for the Thumbnails' main container

hide_onleave

true
false

Set to "false" to always show the Thumbnails. Or "true" to only show the Thumbnails on mouse-over.

hide_onmobile

true
false

Hide Thumbnails on mobile devices.

hide_under

true
false

Hide Thumbnails on mobile devices.

hide_over

Choose to hide the Thumbnails over a certain screen width.

hide_delay

A delay in milliseconds for how long the Thumbnails will take to fade out when "hide_onleave" is set to "true".

hide_delay_mobile

The amount of time in milliseconds before the navigation fades out of view after a "tap" occurs on mobile devices.

Touch

navigation: {

    touch: {

        touchenabled: 'on',
        swipe_threshold: 75,
        swipe_min_touches: 1,
        swipe_direction: 'horizontal',
        drag_block_vertical: true

    }

},

touchenabled

Enable touch navigation for mobile.

swipe_threshold

The swipe action sensitivity. A smaller number would mean that only a short swipe is needed for the slide to change. A larger number would mean that a more elaborate swipe would need to take place for the slide to change.

swipe_min_touches

The number of fingers required for a swipe action to be registered.

swipe_direction

horizontal
vertical

Use "horizontal" for traditional left-to-right touch-swipe navigation. Or use "vertical" for Useful for when your slide animations are set to "Slide Vertical (Next/Previous)", where swiping up or down would change the slides.

drag_block_vertical

Allow for the page to be scrolled vertically when touch is enabled.

Combination Example

Example combining Keyboard/Mouse, Arrows, Bullets and Touch

navigation: {

    keyboardNavigation: 'on',
    keyboard_direction: 'horizontal',
    mouseScrollNavigation: 'on',
    mouseScrollReverse: 'reverse',
    onHoverStop: 'on',

    arrows: {

        enable: true,
        style: 'hesperiden',
        rtl: false,
        hide_onleave: false,
        hide_onmobile: true,
        hide_under: 0,
        hide_over: 9999,
        hide_delay: 200,
        hide_delay_mobile: 1200,

        left: {
            container: 'slider',
            h_align: 'left',
            v_align: 'center',
            h_offset: 20,
            v_offset: 0
        },

        right: {
            container: 'slider',
            h_align: 'right',
            v_align: 'center',
            h_offset: 20,
            v_offset: 0
        }

    },

    bullets: {

        enable: true,
        style: 'hesperiden',
        direction: 'horizontal',
        rtl: false,

        container: 'slider',
        h_align: 'center',
        v_align: 'bottom',
        h_offset: 0,
        v_offset: 20,
        space: 5,

        hide_onleave: false,
        hide_onmobile: false,
        hide_under: 0,
        hide_over: 9999

    },

    touch: {

        touchenabled: 'on',
        swipe_threshold: 75,
        swipe_min_touches: 1,
        swipe_direction: 'horizontal',
        drag_block_vertical: true

    }

},

Full Script Example

Full Script Example with Keyboard/Mouse, Arrows, Bullets and Touch options added

Navigation

Keyboard / Mouse

Arrows

Bullets

Tabs

Thumbs

Touch

Combination Example

Example combining Keyboard/Mouse, Arrows, Bullets and Touch

Full Script Example

Full Script Example with Keyboard/Mouse, Arrows, Bullets and Touch options added

Popular Solutions