Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

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

navigation: {
 
    keyboardNavigation: 'on',
    keyboard_direction: 'horizontal',
    mouseScrollNavigation: 'on',
    mouseScrollReverse: 'reverse',
    onHoverStop: 'on',
 
},

keyboardNavigation
  • on
  • off
Choose to enable arrow keys to navigate between slides.
keyboard_direction
  • horizontal
  • vertical
Control the slider with left/right or up/down keys.
mouseScrollNavigation
  • on
  • off
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
  • on
  • off
Choose if the slider's progress should pause when hovering the slider with your mouse.

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.

                      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.

                                        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.

                                                                      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.

                                                                                                    navigation: {
                                                                                                     
                                                                                                        touch: {
                                                                                                     
                                                                                                            touchenabled: 'on',
                                                                                                            swipe_threshold: 75,
                                                                                                            swipe_min_touches: 1,
                                                                                                            swipe_direction: 'horizontal',
                                                                                                            drag_block_vertical: true
                                                                                                     
                                                                                                        }
                                                                                                     
                                                                                                    },

                                                                                                    touchenabled
                                                                                                    • on
                                                                                                    • off
                                                                                                    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
                                                                                                        • on
                                                                                                        • off
                                                                                                        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

                                                                                                        <script type="text/javascript">
                                                                                                         
                                                                                                            /* https://learn.jquery.com/using-jquery-core/document-ready/ */
                                                                                                            jQuery(document).ready(function() {
                                                                                                         
                                                                                                                /* initialize the slider based on the Slider's ID attribute from the wrapper above */
                                                                                                                jQuery('#rev_slider_1').show().revolution({
                                                                                                         
                                                                                                                    delay: 9000,
                                                                                                                    gridwidth: 400,
                                                                                                                    gridheight:300,
                                                                                                                    stopLoop: "on",
                                                                                                                    stopAfterLoops: 0,
                                                                                                                    stopAtSlide: 1,
                                                                                                                    autoHeight: 'on',
                                                                                                                    sliderLayout: 'auto',
                                                                                                         
                                                                                                                    /* BEGIN NAVIGATION */
                                                                                                                    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
                                                                                                         
                                                                                                                        }
                                                                                                         
                                                                                                                    }
                                                                                                                    /* END NAVIGATION */
                                                                                                         
                                                                                                                });
                                                                                                            });
                                                                                                         
                                                                                                        </script>

                                                                                                        Popular Solutions

                                                                                                        [ess_grid alias="wp-popular-solutions"]
                                                                                                        Impressum | Datenschutz