Navigation Settings Overview

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.

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.

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.

rtl: false/true – Change the Order of Button Functions. From:Previous(left) Next(right) To:Previous(right) and Next(left)

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.

container: Based on Which Container the Position should be calculated. Possible Values: “slider” or “layergrid”.

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.

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.

rtl: Change the Order of Bullet Functions. If this set to true: Last Bullet will Call Slide #1 and First Bullet will call the Last Slide

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

container: Based on which Container the Position should be calculated. Possible Values: “slider” or “layergrid”.

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.

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.

rtl: Change the Order of Thumb Functions. If this set to true: Last Thumb will Call Slide #1 and First Thumb will call the Last Slide

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

container: Based on which Container the Position should be calculated. Possible Values: “slider” or “layergrid”.

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

v_align: The Vertical Align of the Thumbnails 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 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)

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.

rtl: Change the Order of Tab Functions. If this set to true: Last Tab will Call Slide #1 and First Tab will call the Last Slide

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

container: Based on which Container the Position should be calculated. Possible Values: “slider” or “layergrid”.

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

v_align: The Vertical Align of the Tabs 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 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)