Navigation Settings Overview

5.0, Anatomy08.07.2015Krisztian

This capital gives you an overview of all settings you can define via the Initialisation script. The Options are optional, and in some cases work only in connection with each other.
Undefined options will use the Default values preset via the Slider Revolution Plugin. In this capital you will not find any individual settings of Layers, Slides, Static Layers. Those settings will be introduced later in this documentation.
Most options are over-worked in version 5.0 and are different than in version 4.0. In case you update from version 4.x, we strongly recommend to read our Capital later about the Update paths and changes.

Navigation

Main Options

navigation

Type:Object

keyboardNavigation

Type:String

Value:'on','off'

Default:'on'

keyboard_direction

Type:String

Value:'horizontal','vertical'

Default:'horizontal'

mouseScrollNavigation

Type:String

Value:'on','off'

Default:'off'

onHoverStop

Type:String

Value:'on','off'

Default:'on'

touch

Type:Object

Value:Further Options

Default:See further below

arrows

Type:Object

Value:Further Options

Default:See further below

bullets

Type:Object

Value:Further Options

Default:See further below

thumbnails

Type:Object

Value:Further Options

Default:See further below

tabs

Type:Object

Value:Further Options

Default:See further below

navigation : {
  keyboardNavigation:"on",  
  keyboard_direction:"horizontal",
  mouseScrollNavigation:"off",              
  onHoverStop:"on",
  touch:{
         touchenabled:"off",
         swipe_treshold : 75,
         swipe_min_touches : 1,
         drag_block_vertical:false,
         swipe_direction:"horizontal"
            },
  arrows: {
     style:"",
     enable:false,
     hide_onmobile:false,
     hide_onleave:true,
     hide_delay:200,
     hide_delay_mobile:1200,
     hide_under:0,
     hide_over:9999,
     tmp:'',
     left : {
            h_align:"left",
            v_align:"center",
            h_offset:20,
            v_offset:0,
     },
     right : {
            h_align:"right",
            v_align:"center",
            h_offset:20,
            v_offset:0
     }
  },
  bullets: {
     style:"",
     enable:false,
     hide_onmobile:false,
     hide_onleave:true,
     hide_delay:200,
     hide_delay_mobile:1200,
     hide_under:0,
     hide_over:9999,
     direction:"horizontal",
     h_align:"left",
     v_align:"center",
     space:0,
     h_offset:20,
     v_offset:0,
     tmp:'<span class="tp-bullet-image"></span><span class="tp-bullet-title"></span>'
 },
 thumbnails: {
     style:"",
     enable:false,
     width:100,
     height:50,
     min_width:100,
     wrapper_padding:2,
     wrapper_color:"#f5f5f5",
     wrapper_opacity:1,
     tmp:'<span class="tp-thumb-image"></span><span class="tp-thumb-title"></span>',
     visibleAmount:5,
     hide_onmobile:false,
     hide_onleave:true,
     hide_delay:200,
     hide_delay_mobile:1200,
     hide_under:0,
     hide_over:9999,
     direction:"horizontal",
     span:false,
     position:"inner",
     space:2,
     h_align:"left",
     v_align:"center",
     h_offset:20,
     v_offset:0
 },
 tabs: {
     style:"",
     enable:false,
     width:100,
     min_width:100,
     height:50,
     wrapper_padding:10,
     wrapper_color:"#f5f5f5",
     wrapper_opacity:1,
     tmp:'<span class="tp-tab-image"></span>',
     visibleAmount:5,
     hide_onmobile:false,
     hide_onleave:true,
     hide_delay:200,
     hide_delay_mobile:1200,
     hide_under:0,
     hide_over:9999,
     direction:"horizontal",
     span:false,
     space:0,
     position:"inner",
     h_align:"left",
     v_align:"center",
     h_offset:20,
     v_offset:0
 }
},

100

101

102

103

104

105

navigation : {

keyboardNavigation:"on",

keyboard_direction:"horizontal",

mouseScrollNavigation:"off",

onHoverStop:"on",

touch:{

touchenabled:"off",

swipe_treshold : 75,

swipe_min_touches : 1,

drag_block_vertical:false,

swipe_direction:"horizontal"

arrows: {

style:"",

enable:false,

hide_onmobile:false,

hide_onleave:true,

hide_delay:200,

hide_delay_mobile:1200,

hide_under:0,

hide_over:9999,

tmp:'',

left : {

h_align:"left",

v_align:"center",

h_offset:20,

v_offset:0,

right : {

h_align:"right",

v_align:"center",

h_offset:20,

v_offset:0

}

bullets: {

style:"",

enable:false,

hide_onmobile:false,

hide_onleave:true,

hide_delay:200,

hide_delay_mobile:1200,

hide_under:0,

hide_over:9999,

direction:"horizontal",

h_align:"left",

v_align:"center",

space:0,

h_offset:20,

v_offset:0,

tmp:''

thumbnails: {

style:"",

enable:false,

width:100,

height:50,

min_width:100,

wrapper_padding:2,

wrapper_color:"#f5f5f5",

wrapper_opacity:1,

tmp:'',

visibleAmount:5,

hide_onmobile:false,

hide_onleave:true,

hide_delay:200,

hide_delay_mobile:1200,

hide_under:0,

hide_over:9999,

direction:"horizontal",

span:false,

position:"inner",

space:2,

h_align:"left",

v_align:"center",

h_offset:20,

v_offset:0

tabs: {

style:"",

enable:false,

width:100,

min_width:100,

height:50,

wrapper_padding:10,

wrapper_color:"#f5f5f5",

wrapper_opacity:1,

tmp:'',

visibleAmount:5,

hide_onmobile:false,

hide_onleave:true,

hide_delay:200,

hide_delay_mobile:1200,

hide_under:0,

hide_over:9999,

direction:"horizontal",

span:false,

space:0,

position:"inner",

h_align:"left",

v_align:"center",

h_offset:20,

v_offset:0

}

keyboardNavigation: on/off – Allows to enable/disable the keyboard navigation.

keyboard_direction: horizontal/vertical – use up/down or left/right arrows key for the navigation

mouseScrollNavigation: on/off – Allows mouse scroll based slide navigation.

onHoverStop: on/off – If set to on, slider progress is stopped when Slider is hovered. Will not stop the Layer animations, only the Slider Progress Bar !

touch: Object with further options. See Settings later below. You can set Touch and Swip behavior, tresholds, directions with this object.

arrows: Object with further options. See Settings later below. You can set the Design, Behavior, Markup of the Arrow Buttons in the Slider.

bullets: Object with further options. See Settings later below. You can set the Design, Behavior, Markup of the Bullet Buttons in the Slider.

thumbnails: Object with further options. See Settings later below. You can set the Design, Behavior, Markup of the Thumbnail Buttons in the Slider.

tabs: Object with further options. See Settings later below. You can set the Design, Behavior, Markup of the Tab Buttons in the Slider.

Touch

touch

Type:Object

touchenabled

Type:String

Value:'on','off'

Default:'on'

swipe_treshold

Type:Integer

Value:Number

Default:75

swipe_min_touches

Type:Integer

Value:Number

Default:1

drag_block_vertical

Type:Boolean

Value:true,false

Default:false

swipe_direction

Type:String

Value:'horizontal','vertical'

Default:'horizontal'

navigation : {
  ...
  touch:{
         touchenabled:"off",
         swipe_treshold : 75,
         swipe_min_touches : 1,
         drag_block_vertical:false,
         swipe_direction:"horizontal"
        },
 ...
},

navigation : {

...

touch:{

touchenabled:"off",

swipe_treshold : 75,

swipe_min_touches : 1,

drag_block_vertical:false,

swipe_direction:"horizontal"

...

touchenabled: on/off – Enable/Disable the Touch function for none Carousel Sliders

swipe_treshold: the treshold for the Swipe before it gets recognised

swipe_min_touches: the min amount of “touching” fingers which triggers the swipe function

drag_block_vertical: ignore swipes / drags vertical direction

swipe_direction: The direction of Swipe to trigger Slide change functions.

Arrows

arrows

Type:Object

style

Type:String

Value:Class

Default:''

enable

Type:Boolean

Value:true,false

Default:false

hide_onmobile

Type:Boolean

Value:true,false

Default:false

hide_onleave

Type:Boolean

Value:true,false

Default:true

hide_delay

Type:Integer

Value:ms

Default:200

hide_delay_mobile

Type:Integer

Value:ms

Default:1200

hide_under

Type:Integer

Value:px

Default:0

hide_over

Type:Integer

Value:px

Default:9999

tmp

Type:String

Value:HTML Markup

Default:''

left

Type:Object

left:{h_align}

Type:String

Value:"left","center","right"

Default:"left"

left:{v_align}

Type:String

Value:"top","center","bottom"

Default:"center"

left:{h_offset}

Type:Integer

Value:px

Default:20

left:{v_offset}

Type:Integer

Value:px

Default:0

right

Type:Object

right:{h_align}

Type:String

Value:"left","center","right"

Default:"left"

right:{v_align}

Type:String

Value:"top","center","bottom"

Default:"center"

right:{h_offset}

Type:Integer

Value:px

Default:20

right:{v_offset}

Type:Integer

Value:px

Default:0

navigation : {
  ...
  arrows:{
         style:"",
         enable:false,
         hide_onmobile:false,
         hide_onleave:true,
         hide_delay:200,
         hide_delay_mobile:1200,
         hide_under:0,
         hide_over:9999,
         tmp:'',
         left:{
            h_align:"left",
            v_align:"center",
            h_offset:20,
            v_offset:0
         },
         right:{
           h_align:"right",
           v_align:"center",
           h_offset:20,
           v_offset:0
         }
        },
 ...
},

navigation : {

...

arrows:{

style:"",

enable:false,

hide_onmobile:false,

hide_onleave:true,

hide_delay:200,

hide_delay_mobile:1200,

hide_under:0,

hide_over:9999,

tmp:'',

left:{

h_align:"left",

v_align:"center",

h_offset:20,

v_offset:0

right:{

h_align:"right",

v_align:"center",

h_offset:20,

v_offset:0

}

...

style: The name of the class which is automatically added later to the generated markup of the arrows. The Style must be loaded via the html document. See examples later.

enable: if this set to true, Navigation arrows will be created for the Slider.

hide_onmobile: if this set to true, the Navigation arrows are hiddeon on Mobile Devices

hide_delay: After how many “ms” the Navigation arrows fade out.

hide_delay_mobile: After how many “ms” the Navigation arrows fade out on mobile devices. This can be different to default hide_delay

hide_under: Under the defined “px” the Navigation Arrows will be hidden.

hide_over: Over the defined “px” the Navigation Arrows will be hidden.

tmp: The HTML Markup for the arrows. You can define any html based markup which will be used for the Arrows. See examples later.

left/right: Objects to define Position of left and right arrows. Both

h_align: The Horizontal Align of the Arrow (left or right Arrow) within the Slider.

v_align: The Vertical Align of the Arrow (left or right Arrow) within the Slider.

h_offset: The Horizontal offset in px from the Aligned position. (Left or Right Arrow). Negative Values on left aligned elements will move left, and negative values on right aligned elements will move right the element.

v_offset: The Vertical offset in px from the Aligned position. (Left or Right Arrow). Negative Values on top aligned elements will move top, and negative values on bottom aligned elements will move bottom the element.

Bullets

bullets

Type:Object

style

Type:String

Value:Class

Default:''

enable

Type:Boolean

Value:true,false

Default:false

hide_onmobile

Type:Boolean

Value:true,false

Default:false

hide_onleave

Type:Boolean

Value:true,false

Default:true

hide_delay

Type:Integer

Value:ms

Default:200

hide_delay_mobile

Type:Integer

Value:ms

Default:1200

hide_under

Type:Integer

Value:px

Default:0

hide_over

Type:Integer

Value:px

Default:9999

tmp

Type:String

Value:HTML Markup

Default:''

direction

Type:String

Value:'horizontal','vertical'

Default:'horizontal'

space

Type:Integer

Value:px

Default:0

h_align

Type:String

Value:"left","center","right"

Default:"left"

v_align

Type:String

Value:"top","center","bottom"

Default:"center"

h_offset

Type:Integer

Value:px

Default:20

v_offset

Type:Integer

Value:px

Default:0

navigation : {
  ...
  bullets:{
         style:"",
         enable:false,
         hide_onmobile:false,
         hide_onleave:true,
         hide_delay:200,
         hide_delay_mobile:1200,
         hide_under:0,
         hide_over:9999,
         tmp:'<span class="tp-bullet-image"></span><span class="tp-bullet-title"></span>', 
         direction:"horizontal",
         space:0,       
         h_align:"left",
         v_align:"center",
         h_offset:0,
         v_offset:20
        },
 ...
},

navigation : {

...

bullets:{

style:"",

enable:false,

hide_onmobile:false,

hide_onleave:true,

hide_delay:200,

hide_delay_mobile:1200,

hide_under:0,

hide_over:9999,

tmp:'',

direction:"horizontal",

space:0,

h_align:"left",

v_align:"center",

h_offset:0,

v_offset:20

...

style: The name of the class which is automatically added later to the generated markup of the bullets. The Style must be loaded via the html document. See examples later.

enable: if this set to true, Bullets will be added to the Slider.

hide_onmobile: if this set to true, the Bullets are hidden on Mobile Devices

hide_delay: After how many “ms” the Bullets fade out.

hide_delay_mobile: After how many “ms” the Bullets fade out on mobile devices. This can be different to default hide_delay

hide_under: Under the defined “px” the Bullets will be hidden.

hide_over: Over the defined “px” the Bullets will be hidden.

tmp: The HTML Markup for the single Bullets. You can define any html based markup here, see examples later.

h_align: The Horizontal Align of the Bullets within the Slider.

v_align: The Vertical Align of the Bullets within the Slider.

h_offset: The Horizontal offset in px from the Aligned position. Negative Values on left aligned elements will move left, and negative values on right aligned elements will move right the element.

v_offset: The Vertical offset in px from the Aligned position. Negative Values on top aligned elements will move top, and negative values on bottom aligned elements will move bottom the element.

direction: the Direction of the Bullets. Vertical or Horizontal.

space: the space between single Bullet Points in px.

Thumbnails

thumbnails

Type:Object

style

Type:String

Value:Class

Default:''

enable

Type:Boolean

Value:true,false

Default:false

width

Type:Integer

Value:px

Default:100

height

Type:Integer

Value:px

Default:50

wrapper_padding

Type:Integer

Value:px

Default:2

wrapper_opacity

Type:Integer

Value:Number

Default:1

wrapper_color

Type:String

Value:HEX

Default:'#f5f5f5'

visibleAmount

Type:Integer

Value:Number

Default:5

hide_onmobile

Type:Boolean

Value:true,false

Default:false

hide_onleave

Type:Boolean

Value:true,false

Default:true

hide_delay

Type:Integer

Value:ms

Default:200

hide_delay_mobile

Type:Integer

Value:ms

Default:1200

hide_under

Type:Integer

Value:px

Default:0

hide_over

Type:Integer

Value:px

Default:9999

tmp

Type:String

Value:HTML Markup

Default:''

direction

Type:String

Value:'horizontal','vertical'

Default:'horizontal'

span

Type:Boolean

Value:true,false

Default:false

position

Type:String

Value:'inner','outer-left','outer-right','outer-bottom','outer-top'

Default:'inner'

space

Type:Integer

Value:px

Default:0

h_align

Type:String

Value:"left","center","right"

Default:"left"

v_align

Type:String

Value:"top","center","bottom"

Default:"center"

h_offset

Type:Integer

Value:px

Default:20

v_offset

Type:Integer

Value:px

Default:0

navigation : {
  ...
  thumbnails:{
         style:"",
         enable:false,
         width:100,
         height:50,
         wrapper_padding:2,
         wrapper_color:'#f5f5f5',
         wrapper_opacity:1,
         visibleAmount:5,
         hide_onmobile:false,
         hide_onleave:true,
         hide_delay:200,
         hide_delay_mobile:1200,
         hide_under:0,
         hide_over:9999,
         tmp:'<span class="tp-thumb-image"></span><span class="tp-thumb-title"></span>', 
         direction:"horizontal",
         span:false,
         position:"inner",
         space:0,       
         h_align:"left",
         v_align:"center",
         h_offset:0,
         v_offset:20
        },
 ...
},

navigation : {

...

thumbnails:{

style:"",

enable:false,

width:100,

height:50,

wrapper_padding:2,

wrapper_color:'#f5f5f5',

wrapper_opacity:1,

visibleAmount:5,

hide_onmobile:false,

hide_onleave:true,

hide_delay:200,

hide_delay_mobile:1200,

hide_under:0,

hide_over:9999,

tmp:'',

direction:"horizontal",

span:false,

position:"inner",

space:0,

h_align:"left",

v_align:"center",

h_offset:0,

v_offset:20

...

style: The name of the class which is automatically added later to the generated markup of the Thumbs. The Style must be loaded via the html document. See examples later.

enable: if this set to true, Navigation Thumbs will be added for the Slider.

width: the width of one single Thumbnail

height: the height of one single Thumbnail

min_width: the minimal width of a single Thumbnail when the screen shrinks. Thumbnails are linear resized (downscaled) on smaller screens. If minimal width is set (different then 0) the thumb will never be smaller than this value keeping the original Aspect Ratio.

wrapper_padding: The Thumbnails Wrapped Container Padding (px).

wrapper_color: The background color of the Thumbnails Wrapper Container

wrapper_opacity: The opacity of the background of the Thumbnais Wrapper Container

visibleAmount: The maximum visible amount of Thumbs in the same time. If more thumbs exist, the Thumbs becomes Draggable and scrollable. If less, the amount of Thumbs will be equal to the amount of existing thumbs.

hide_onmobile: if this set to true, the Thumbnails are hidden on Mobile Devices

hide_delay: After how many “ms” the Thumbnails fade out.

hide_delay_mobile: After how many “ms” the Thumbnails fade out on mobile devices. This can be different to default hide_delay

hide_under: Under the defined “px” the Thumbnails will be hidden.

hide_over: Over the defined “px” the Thubmnails will be hidden.

tmp: The HTML Markup for the Thumbs. You can define any html based markup which will be used for the Thumbs. See examples later.

h_align: The Horizontal Align of the Thumbnails within the Slider.

v_align: The Vertical Align of the Thumbnails within the Slider.

v_offset: The Vertical offset in px from the Aligned position. Negative Values on top aligned elements will move top, and negative values on bottom aligned elements will move bottom the element.

direction: the Direction of the Thumbnails. Vertical or Horizontal.

space: the space between single Thumbs in px.

position: Where the Thumbnails are drawn. Inner or Outer the Slider. (outer-left, outer-right, outer-top, outer-bottom, inner)

Tabs

tabs

Type:Object

style

Type:String

Value:Class

Default:''

enable

Type:Boolean

Value:true,false

Default:false

width

Type:Integer

Value:px

Default:100

height

Type:Integer

Value:px

Default:50

wrapper_padding

Type:Integer

Value:px

Default:2

wrapper_opacity

Type:Integer

Value:Number

Default:1

wrapper_color

Type:String

Value:HEX

Default:'#f5f5f5'

visibleAmount

Type:Integer

Value:Number

Default:5

hide_onmobile

Type:Boolean

Value:true,false

Default:false

hide_onleave

Type:Boolean

Value:true,false

Default:true

hide_delay

Type:Integer

Value:ms

Default:200

hide_delay_mobile

Type:Integer

Value:ms

Default:1200

hide_under

Type:Integer

Value:px

Default:0

hide_over

Type:Integer

Value:px

Default:9999

tmp

Type:String

Value:HTML Markup

Default:''

direction

Type:String

Value:'horizontal','vertical'

Default:'horizontal'

span

Type:Boolean

Value:true,false

Default:false

position

Type:String

Value:'inner','outer-left','outer-right','outer-bottom','outer-top'

Default:'inner'

space

Type:Integer

Value:px

Default:0

h_align

Type:String

Value:"left","center","right"

Default:"left"

v_align

Type:String

Value:"top","center","bottom"

Default:"center"

h_offset

Type:Integer

Value:px

Default:20

v_offset

Type:Integer

Value:px

Default:0

navigation : {
  ...
  tabs:{
         style:"",
         enable:false,
         width:100,
         height:50,
         wrapper_padding:2,
         wrapper_color:'#f5f5f5',
         wrapper_opacity:1,
         visibleAmount:5,
         hide_onmobile:false,
         hide_onleave:true,
         hide_delay:200,
         hide_delay_mobile:1200,
         hide_under:0,
         hide_over:9999,
         tmp:'<span class="tp-thumb-image"></span><span class="tp-thumb-title"></span>', 
         direction:"horizontal",
         span:false,
         position:"inner",
         space:0,       
         h_align:"left",
         v_align:"center",
         h_offset:0,
         v_offset:20
        },
 ...
},

navigation : {

...

tabs:{

style:"",

enable:false,

width:100,

height:50,

wrapper_padding:2,

wrapper_color:'#f5f5f5',

wrapper_opacity:1,

visibleAmount:5,

hide_onmobile:false,

hide_onleave:true,

hide_delay:200,

hide_delay_mobile:1200,

hide_under:0,

hide_over:9999,

tmp:'',

direction:"horizontal",

span:false,

position:"inner",

space:0,

h_align:"left",

v_align:"center",

h_offset:0,

v_offset:20

...

style: The name of the class which is automatically added later to the generated markup of the Tabs. The Style must be loaded via the html document. See examples later.

enable: if this set to true, Navigation Tabs will be added for the Slider.

width: the width of one single Tabs

height: the height of one single Tabs

min_width: the minimal width of a single Tab when the screen shrinks. Thumbnails are linear resized (downscaled) on smaller screens. If minimal width is set (different then 0) the thumb will never be smaller than this value keeping the original Aspect Ratio.

wrapper_padding: The Tabs Wrapped Container Padding (px).

wrapper_color: The background color of the Tabs Wrapper Container

wrapper_opacity: The opacity of the background of the Tabs Wrapper Container

visibleAmount: The maximum visible amount of Tabs in the same time. If more thumbs exist, the Tabs becomes Draggable and scrollable. If less, the amount of Tabs will be equal to the amount of existing thumbs.

hide_onmobile: if this set to true, the Tabs are hidden on Mobile Devices

hide_delay: After how many “ms” the Tabs fade out.

hide_delay_mobile: After how many “ms” the Tabs fade out on mobile devices. This can be different to default hide_delay

hide_under: Under the defined “px” the Tabs will be hidden.

hide_over: Over the defined “px” the Tabs will be hidden.

tmp: The HTML Markup for the Tabs. You can define any html based markup which will be used for the Tabs. See examples later.

h_align: The Horizontal Align of the Tabs within the Slider.

v_align: The Vertical Align of the Tabs within the Slider.

v_offset: The Vertical offset in px from the Aligned position. Negative Values on top aligned elements will move top, and negative values on bottom aligned elements will move bottom the element.

direction: the Direction of the Tabs. Vertical or Horizontal.

space: the space between single Tabs in px.

position: Where the Tabs are drawn. Inner or Outer the Slider. (outer-left, outer-right, outer-top, outer-bottom, inner)

Back