<!--
You can use the following data attributes and their values For Carousels only.
For more detail please read documentation.
-->
<!--
1 - data-type = " carousel "
2 - data-width = " 100% (default) || 123 (number) "
3 - data-height = " inherit (default) || window || 123 (number) "
4 - data-animation = " dragX (default) || dragY || swipeX || swipeY || default "
5 - data-sticky = " no (default) || yes " Only Works With Drag-able Animation.
6 - data-duration = " 200 (default) || 123 (number) "
7 - data-timing = " ease (default) || 33 other options "
8 - data-pauses = " no (default) || yes "
9 - data-start = " no (default) || auto "
10 - data-intervals = " yes (default) || no "
11 - data-cycle = " yes (default) || stop "
12 - data-mouse = " no (default) || yes "
13 - data-keyboards = " no (default) || yes "
14 - data-preloader = " {value-1}:{value-2}:{value-3} "
{type}:{object-color}:{background-color}
types : circle (default) || dots || scale || box || bars "
15 - data-cursor = " default (default) || default-1 || move || grab || row-resize
col-resize || crosshair || e-resize || n-resize || pointer "
16 - 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.
16 - 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>
17 - 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 "
18 - 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} "
19 - Multiple Items - Options :
data-items = " 5 (default) || 123 (number) " - @media (min-width:1201px)
data-xlscreen = " 4 (default) || 123 (number) " - @media (min-width:993px) and (max-width:1200px)
data-lgscreen = " 3 (default) || 123 (number) " - @media (min-width:769px) and (max-width:992px)
data-mdscreen = " 2 (default) || 123 (number) " - @media (min-width:576px) and (max-width:768px)
data-smscreen = " 1 (default) || 123 (number) " - @media (max-width:575px)
data-move = " 1 (default) || all "
data-free-mode = " true || To make free mode "false" remove the attribute " This will works only Drag-able
|| Please use 1 value in data-threshold attribute
-->
<!--
20 - 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 "
-->
<!--
21 - Fraction Pagination Option :
<div class="carousel-item-number">
<span class="carousel-item-single"></span>
<span>/</span>
<span class="carousel-item-length"></span>
</div>
-->
<!--
22 - 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 "
-->