Navigation Syntax

  • keyboardNavigationon off
    Choose to enable arrow keys to navigate between slides.
  • keyboard_directionhorizontal vertical
    Control the slider with left/right or up/down keys.
  • mouseScrollNavigationon off
    Capture mouse-wheel movement to change between slides.
  • mouseScrollReversenormal reverse
    Reverse the direction that the slides change when the mouse-wheel is used.
  • onHoverStopon off
    Choose if the slider's progress should pause when hovering the slider with your mouse.

  • enabletrue false
    Enable Arrow navigation.
  • styleThe 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.
  • tmpAdditional markup included for certain navigation styles.
  • rtltrue false
    Set to "true" for right-to-left-language websites.  Otherwise use "false".
  • hide_onleavetrue false
    Set to "false" to always show the Arrows.  Or "true" to only show the Arrows on mouse-over.
  • hide_onmobiletrue false
    Hide Arrows on mobile devices.
  • hide_underChoose to hide the Arrows under a certain screen width.
  • hide_overChoose to hide the Arrows over a certain screen width.
  • hide_delayA delay in milliseconds for how long the Arrows will take to fade out when "hide_onleave" is set to "true".
  • hide_delay_mobileThe amount of time in milliseconds before the navigation fades out of view after a "tap" occurs on mobile devices.
  • leftOptions 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.

  • enabletrue false
    Enable Bullet navigation.
  • styleThe 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.
  • tmpAdditional markup included for certain navigation styles.
  • directionhorizontal vertical
    Choose if the Bullets should be placed next to or on top of one another.
  • rtltrue false
    Set to "true" for right-to-left-language websites.  Otherwise use "false".
  • containerslider layergrid
    Align the Bullets to the entire slider or to the Layers Grid.
  • h_alignleft center right
    The horizontal alignment.
  • v_aligntop center bottom
    The vertical alignment.
  • h_offsetThe horizontal alignment offset in pixels.
  • v_offsetThe vertical alignment offset in pixels.
  • spaceThe spacing in pixels between the Bullets.
  • hide_onleavetrue false
    Set to "false" to always show the Bullets.  Or "true" to only show the Bullets on mouse-over.
  • hide_onmobiletrue false
    Hide Bullets on mobile devices.
  • hide_underChoose to hide the Bullets under a certain screen width.
  • hide_overChoose to hide the Bullets over a certain screen width.
  • hide_delayA delay in milliseconds for how long the Bullets will take to fade out when "hide_onleave" is set to "true".
  • hide_delay_mobileThe amount of time in milliseconds before the navigation fades out of view after a "tap" occurs on mobile devices.

  • enabletrue false
    Enable Tab navigation.
  • styleThe 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.
  • tmpAdditional markup included for certain navigation styles.
  • widthThe default tab width in pixels
  • heightThe default tab height in pixels
  • min_widthThe minimum width to maintain for each tab
  • visibleAmountThe total amount of tabs to show at any given time inside the tabs main container.
  • rtltrue false
    Set to "true" for right-to-left-language websites.  Otherwise use "false".
  • directionhorizontal vertical
    Choose if the Tabs should be placed next to or on top of one another.
  • positioninner outer-left outer-right outer-top outer-bottom
    Choose whether the tabs should be placed inside or outside of the main slider.
  • spaceThe spacing in pixels between the Tabs.
  • h_alignleft center right
    The horizontal alignment.
  • v_aligntop center bottom
    The vertical alignment.
  • h_offsetThe horizontal alignment offset in pixels.
  • v_offsetThe vertical alignment offset in pixels.
  • spantrue false
    The display property for the Tabs' main container.  Choose "true" for "block", and "false" for "inline-block".
  • wrapper_paddingThe CSS padding for the Tabs' main container.
  • wrapper_colorThe background-color for the Tabs' main container.
  • wrapper_opacityThe background opacity for the Tabs' main container
  • hide_onleavetrue false
    Set to "false" to always show the Tabs.  Or "true" to only show the Tabs on mouse-over.
  • hide_onmobiletrue false
    Hide Tabs on mobile devices.
  • hide_undertrue false
    Hide Tabs on mobile devices.
  • hide_overChoose to hide the Tabs over a certain screen width.
  • hide_delayA delay in milliseconds for how long the Tabs will take to fade out when "hide_onleave" is set to "true".
  • hide_delay_mobileThe amount of time in milliseconds before the navigation fades out of view after a "tap" occurs on mobile devices.

  • enabletrue false
    Enable Thumbnail navigation.
  • styleThe 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.
  • tmpAdditional markup included for certain navigation styles.
  • widthThe default Thumbnail width in pixels
  • heightThe default Thumbnail height in pixels
  • min_widthThe minimum width to maintain for each Thumbnail
  • visibleAmountThe total amount of Thumbnails to show at any given time inside the Thumbnails main container.
  • rtltrue false
    Set to "true" for right-to-left-language websites.  Otherwise use "false".
  • directionhorizontal vertical
    Choose if the Thumbnails should be placed next to or on top of one another.
  • positioninner outer-left outer-right outer-top outer-bottom
    Choose whether the Thumbnails should be placed inside or outside of the main slider.
  • spaceThe spacing in pixels between the Thumbnails.
  • h_alignleft center right
    The horizontal alignment.
  • v_aligntop center bottom
    The vertical alignment.
  • h_offsetThe horizontal alignment offset in pixels.
  • v_offsetThe vertical alignment offset in pixels.
  • spantrue false
    The display property for the Thumbnails' main container.  Choose "true" for "block", and "false" for "inline-block".
  • wrapper_paddingThe CSS padding for the Thumbnails' main container.
  • wrapper_colorThe background-color for the Thumbnails' main container.
  • wrapper_opacityThe background opacity for the Thumbnails' main container
  • hide_onleavetrue false
    Set to "false" to always show the Thumbnails.  Or "true" to only show the Thumbnails on mouse-over.
  • hide_onmobiletrue false
    Hide Thumbnails on mobile devices.
  • hide_undertrue false
    Hide Thumbnails on mobile devices.
  • hide_overChoose to hide the Thumbnails over a certain screen width.
  • hide_delayA delay in milliseconds for how long the Thumbnails will take to fade out when "hide_onleave" is set to "true".
  • hide_delay_mobileThe amount of time in milliseconds before the navigation fades out of view after a "tap" occurs on mobile devices.

  • touchenabledon off
    Enable touch navigation for mobile.
  • swipe_thresholdThe 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_touchesThe number of fingers required for a swipe action to be registered.
  • swipe_directionhorizontal 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_verticalon off
    Allow for the page to be scrolled vertically when touch is enabled.
Example combining Keyboard/Mouse, Arrows, Bullets and Touch

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