Get It Now
  • Slow entrance
    Click next before this finishes.
    It should cancel instead of delaying slide change.
Shortcut to Examples Back to Examples Page

Layers

Layer Timing Interruption

Manual next/previous cancels unfinished layer entrances and fast-exits completed layers.

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/a01.jpg">
      <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="44" data-y-offset="" data-z="10" data-anim-in-type="bounceInUp" data-anim-in-delay="2000" data-anim-in-speed="9000" data-anim-out-type="bounceOutUp" data-anim-out-delay="1500" data-anim-out-speed="5000" data-style="width:340px;font-family:&quot;Inter&quot;, ui-sans-serif, system-ui, sans-serif;" data-device-visibility='{&quot;desktop&quot;:true,&quot;tablet&quot;:true,&quot;mobile&quot;:true}'><span class="demo-layer-text-content">Slow entrance</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="44" data-y-offset="44" 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:&quot;Inter&quot;, ui-sans-serif, system-ui, sans-serif;" data-device-visibility='{&quot;desktop&quot;:true,&quot;tablet&quot;:true,&quot;mobile&quot;:true}'><span class="demo-layer-text-content">Click next before this finishes.</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="44" data-y-offset="84" 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:&quot;Inter&quot;, ui-sans-serif, system-ui, sans-serif;" data-device-visibility='{&quot;desktop&quot;:true,&quot;tablet&quot;:true,&quot;mobile&quot;:true}'><span class="demo-layer-text-content">It should cancel instead of delaying slide change.</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": 500,
  "transition": "moveHorizontal",
  "transitionSpeed": 900,
  "transitionDelay": 5200,
  "manualLayerExitDelay": 100,
  "manualLayerExitSpeed": 500
});
});