Navigation
Keyboard / Mouse
navigation: {
keyboardNavigation: 'on',
keyboard_direction: 'horizontal',
mouseScrollNavigation: 'on',
mouseScrollReverse: 'reverse',
onHoverStop: 'on',
},
- on
- off
- horizontal
- vertical
- on
- off
- normal
- reverse
- on
- off
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
}
}
},
- true
- false
- true
- false
- true
- false
- true
- false
Options for the Left Arrow
- slider
- layergrid
- left
- center
- right
- top
- center
- bottom
Options for the Right Arrow
- slider
- layergrid
- left
- center
- right
- top
- center
- bottom
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
}
},
- true
- false
- horizontal
- vertical
- true
- false
- slider
- layergrid
- left
- center
- right
- top
- center
- bottom
- true
- false
- true
- false
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
}
},
- true
- false
- true
- false
- horizontal
- vertical
- inner
- outer-left
- outer-right
- outer-top
- outer-bottom
- left
- center
- right
- top
- center
- bottom
- true
- false
- true
- false
- true
- false
- true
- false
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
}
},
- true
- false
- true
- false
- horizontal
- vertical
- inner
- outer-left
- outer-right
- outer-top
- outer-bottom
- left
- center
- right
- top
- center
- bottom
- true
- false
- true
- false
- true
- false
- true
- false
Touch
navigation: {
touch: {
touchenabled: 'on',
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: 'horizontal',
drag_block_vertical: true
}
},
- on
- off
- horizontal
- vertical
- on
- off
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>