<!--
You can use the following data attributes and their values For Sliders only.
For more detail please read documentation.
-->
<!--
1 - data-type = " slider "
2 - data-width = " 100% (default) || 123 (number) "
3 - data-height = " inherit (default) || window || 123 (number) || auto (special) "
4 - data-background = " hero (default) || image "
5 - data-image = " cover (default) || 123 (number) "
6 - data-animation = " dragX (default) || dragY || swipeX || swipeY ||
dragCoverX || dragCoverY || swipeCoverX || swipeCoverY ||
dragCover2X || dragCover2Y || swipeCover2X || swipeCover2Y ||
dragCover3X || dragCover3Y || swipeCover3X || swipeCover3Y ||
dragCover4X || dragCover4Y || swipeCover4X || swipeCover4Y ||
fade || class || default "
6 - i :
If data-animation attribute has a value from one of the following :
data-animation = " dragCoverX || dragCoverY || swipeCoverX || swipeCoverY
dragCover2X || dragCover2Y || swipeCover2X || swipeCover2Y
dragCover3X || dragCover3Y || swipeCover3X || swipeCover3Y
dragCover4X || dragCover4Y || swipeCover4X || swipeCover4Y "
Then this attribute will work also otherwise not:
data-space = " 1.35 (default) || 123 (number) "
6 - ii :
If data-animation attribute has a value from one of the following:
data-animation = " dragCover2X || dragCover2Y || swipeCover2X || swipeCover2Y
dragCover3X || dragCover3Y || swipeCover3X || swipeCover3Y
dragCover4X || dragCover4Y || swipeCover4X || swipeCover4Y "
Then these attributes will work also otherwise not:
data-space = " 1.35 (default) || 123 (number) "
data-cover-min = " 0.875 (default) || 123 (number) "
data-cover-max = " 1 (default) || 123 (number) "
data-cover-perspective = " 0 (default) || 123 (number) "
6 - iii :
If data-animation attribute has "class" as a value then you must assign the following attributes to items or slides (carousel-item / item):
data-slides-in = " {value-in-1}:{value-in-2}:{value-in-3} "
data-slides-in = " {animationInClassName}:{animationInDuration}:{animationInTransitionTimingFunction} "
data-slides-out = " {value-out-1}:{value-out-2}:{value-out-3} "
data-slides-out = " {animationOutClassName}:{animationOutDuration}:{animationOutTransitionTimingFunction} "
7 - data-sticky = " no (default) || yes " Only Works With Drag-able Animation But not cover2 series
8 - data-duration = " 200 (default) || 123 (number) "
9 - data-timing = " ease (default) || 33 other options "
10 - data-pauses = " no (default) || yes "
11 - data-start = " no (default) || auto "
12 - data-intervals = " yes (default) || no "
13 - data-cycle = " yes (default) || stop "
14 - data-mouse = " no (default) || yes "
15 - data-keyboards = " no (default) || yes "
16 - data-preloader = " {value-1}:{value-2}:{value-3} "
{type}:{object-color}:{background-color}
types : circle (default) || dots || scale || box || bars "
17 - data-cursor = " default (default) || default-1 || move || grab || row-resize
col-resize || crosshair || e-resize || n-resize || pointer "
18 - Indicators || Thumbnails - Options :
Use ( sz-thumbnails ) class to create thumbnails with ( carousel-indicators ) class.
data-ind-direction = " x (default) || y "
data-ind-type = " absolute (default) || relative "
data-ind-position = " bottom (default) || top || left || right "
data-ind-duration = " 200 (default) || 123 (number) " Assign this to ( carousel-indicators ) div.
18 - i :
Loading Indicators Pagination Option :
Use class (.sz-ind-animated) to create loading indicators pagination.
And also append a <span></span> into each <li>.
<ol class="carousel-indicators sz-ind-animated">
<li data-target="#my-slider-id" class="active"><span></span></li>
<li data-target="#my-slider-id"><span></span></li>
</ol>
19 - Slides || Items - Options :
Assign ( sz-links ) class to anchor tags ( <a> ) to prevent click during drag or swipe.
data-item-interval = " 300ms (default) || false || 123 (number) in milliseconds "
20 - Animation Layers - Options :
Assign ( sz-animated ) class to layer elements to create an animation effect.
data-animation-in = " {value-in-1}:{value-in-2}:{value-in-3}:{value-in-4} "
data-animation-in = " {animationInName}:{animationInDuration}:{animationInDelay}:{animationInTransitionTimingFunction} "
data-animation-out = " {value-out-1}:{value-out-2}:{value-out-3}:{value-out-4} "
data-animation-out = " {animationOutName}:{animationOutDuration}:{animationOutDelay}:{animationOutTransitionTimingFunction} "
-->
<!--
21 - TouchSwipe Plugin Default Options 14 :
data-fingers = " 1 (default) || 123 (number) "
data-threshold = " 75 (default) || 123 (number) "
data-cancelThreshold = " null (default) || 123 (number) "
data-pinchThreshold = " 20 (default) || 123 (number) "
data-maxTimeThreshold = " null (default) || 123 (number) "
data-fingerReleaseThreshold = " null (default) || 123 (number) "
data-longTapThreshold = " 500 (default) || 123 (number) "
data-doubleTapThreshold = " 200 (default) || 123 (number) "
data-triggerOnTouchEnd = " true (default) || false "
data-triggerOnTouchLeave = " true (default) || false "
data-allowPageScroll = " vertical (default) || horizontal || auto || none "
data-fallbackToMouseEvents = " true (default) || false "
data-preventDefaultEvents = " true (default) || false "
data-excludedElements = " .noSwipe (default) || a, p, #id, .class "
-->
<!--
22 - Fraction Pagination Option :
<div class="carousel-item-number">
<span class="carousel-item-single"></span>
<span>/</span>
<span class="carousel-item-length"></span>
</div>
-->
<!--
23 - Loading Bar Pagination Option :
Use Attribute to create loading bar pagination.
This will works only when data-intervals value sets to "yes".
data-progress = " false (default) || true "
-->
<!--
24 - Left And Right Navigations Buttons Thumbnails Option :
data-nav-image = " hidden (default) || show "
-->
<!--
25 - Scroll Down Button Option :
<div class="carousel-scroll-down">
<span>scroll down</span>
</div>
-->