Layers
Layer Positioning
Layers placed with data-x, data-y, data-x-offset, and data-y-offset.
Functional setup
Code for this example
<link rel="stylesheet" href="assets/css/zoroslider.vendor.min.css">
<link rel="stylesheet" href="assets/css/zoroslider.core.min.css">
<link rel="stylesheet" href="assets/css/demo.css"><div id="example-slider">
<ul class="zoro-slider">
<li data-bg-image="img/t09.jpg">
<div class="czzs-layer demo-layer demo-layer-text demo-layer-text" data-layer-type="text" data-x="left" data-y="top" data-x-offset="28" data-y-offset="28" data-z="10" data-anim-in-type="bounceInUp" data-anim-in-delay="450" data-anim-in-speed="900" data-anim-out-type="bounceOutUp" data-anim-out-delay="500" data-anim-out-speed="800" data-style="width:340px;font-family:"Inter", ui-sans-serif, system-ui, sans-serif;" data-position-scope="content" data-device-visibility='{"desktop":true,"tablet":true,"mobile":true}'><span class="demo-layer-text-content">Offset 28, 28</span></div>
<div class="czzs-layer demo-layer demo-layer-text demo-layer-text" data-layer-type="text" data-x="center" data-y="top" data-x-offset="" data-y-offset="28" data-z="10" data-anim-in-type="bounceInUp" data-anim-in-delay="450" data-anim-in-speed="900" data-anim-out-type="bounceOutUp" data-anim-out-delay="500" data-anim-out-speed="800" data-style="width:340px;font-family:"Inter", ui-sans-serif, system-ui, sans-serif;" data-position-scope="content" data-device-visibility='{"desktop":true,"tablet":true,"mobile":true}'><span class="demo-layer-text-content">Offset 0, 28</span></div>
<div class="czzs-layer demo-layer demo-layer-text demo-layer-text" data-layer-type="text" data-x="right" data-y="top" data-x-offset="-28" data-y-offset="28" data-z="10" data-anim-in-type="bounceInUp" data-anim-in-delay="450" data-anim-in-speed="900" data-anim-out-type="bounceOutUp" data-anim-out-delay="500" data-anim-out-speed="800" data-style="width:340px;font-family:"Inter", ui-sans-serif, system-ui, sans-serif;" data-position-scope="content" data-device-visibility='{"desktop":true,"tablet":true,"mobile":true}'><span class="demo-layer-text-content">Offset -28, 28</span></div>
<div class="czzs-layer demo-layer demo-layer-text demo-layer-text" data-layer-type="text" data-x="left" data-y="center" data-x-offset="28" data-y-offset="" data-z="10" data-anim-in-type="bounceInUp" data-anim-in-delay="450" data-anim-in-speed="900" data-anim-out-type="bounceOutUp" data-anim-out-delay="500" data-anim-out-speed="800" data-style="width:340px;font-family:"Inter", ui-sans-serif, system-ui, sans-serif;" data-position-scope="content" data-device-visibility='{"desktop":true,"tablet":true,"mobile":true}'><span class="demo-layer-text-content">Offset 28, 0</span></div>
<div class="czzs-layer demo-layer demo-layer-text demo-layer-text" data-layer-type="text" data-x="center" data-y="center" data-x-offset="" data-y-offset="" data-z="10" data-anim-in-type="bounceInUp" data-anim-in-delay="450" data-anim-in-speed="900" data-anim-out-type="bounceOutUp" data-anim-out-delay="500" data-anim-out-speed="800" data-style="width:340px;font-family:"Inter", ui-sans-serif, system-ui, sans-serif;" data-position-scope="content" data-device-visibility='{"desktop":true,"tablet":true,"mobile":true}'><span class="demo-layer-text-content">Offset 0, 0</span></div>
<div class="czzs-layer demo-layer demo-layer-text demo-layer-text" data-layer-type="text" data-x="right" data-y="center" data-x-offset="-28" data-y-offset="" data-z="10" data-anim-in-type="bounceInUp" data-anim-in-delay="450" data-anim-in-speed="900" data-anim-out-type="bounceOutUp" data-anim-out-delay="500" data-anim-out-speed="800" data-style="width:340px;font-family:"Inter", ui-sans-serif, system-ui, sans-serif;" data-position-scope="content" data-device-visibility='{"desktop":true,"tablet":true,"mobile":true}'><span class="demo-layer-text-content">Offset -28, 0</span></div>
<div class="czzs-layer demo-layer demo-layer-text demo-layer-text" data-layer-type="text" data-x="left" data-y="bottom" data-x-offset="28" data-y-offset="-28" data-z="10" data-anim-in-type="bounceInUp" data-anim-in-delay="450" data-anim-in-speed="900" data-anim-out-type="bounceOutUp" data-anim-out-delay="500" data-anim-out-speed="800" data-style="width:340px;font-family:"Inter", ui-sans-serif, system-ui, sans-serif;" data-position-scope="content" data-device-visibility='{"desktop":true,"tablet":true,"mobile":true}'><span class="demo-layer-text-content">Offset 28, -28</span></div>
<div class="czzs-layer demo-layer demo-layer-text demo-layer-text" data-layer-type="text" data-x="center" data-y="bottom" data-x-offset="" data-y-offset="-28" data-z="10" data-anim-in-type="bounceInUp" data-anim-in-delay="450" data-anim-in-speed="900" data-anim-out-type="bounceOutUp" data-anim-out-delay="500" data-anim-out-speed="800" data-style="width:340px;font-family:"Inter", ui-sans-serif, system-ui, sans-serif;" data-position-scope="content" data-device-visibility='{"desktop":true,"tablet":true,"mobile":true}'><span class="demo-layer-text-content">Offset 0, -28</span></div>
<div class="czzs-layer demo-layer demo-layer-text demo-layer-text" data-layer-type="text" data-x="right" data-y="bottom" data-x-offset="-28" data-y-offset="-28" data-z="10" data-anim-in-type="bounceInUp" data-anim-in-delay="450" data-anim-in-speed="900" data-anim-out-type="bounceOutUp" data-anim-out-delay="500" data-anim-out-speed="800" data-style="width:340px;font-family:"Inter", ui-sans-serif, system-ui, sans-serif;" data-position-scope="content" data-device-visibility='{"desktop":true,"tablet":true,"mobile":true}'><span class="demo-layer-text-content">Offset -28, -28</span></div>
</li>
<li data-bg-image="img/a02.jpg">
</li>
<li data-bg-image="img/a03.jpg">
</li>
</ul>
</div><script src="assets/js/libs/jquery-3.6.0.min.js"></script>
<script src="assets/js/libs/jquery-migrate-3.3.2.min.js"></script>
<script src="assets/js/libs/plyr/plyr.min.js"></script>
<script type="module" src="assets/js/zoroslider.jquery.min.js"></script>
jQuery(function ($) {
$('#example-slider').zoroSlider({
"layout": "default",
"width": 1040,
"height": 520,
"transition": "moveHorizontal",
"pauseOnHover": true,
"transitionSpeed": 800
});
});