Basic Animated

Overview 

Manual slider using custom transitions. The customAnimation option is set to static: the slides are not removed from the viewport and remain visible during the transition to the next slide. Note that pauseBeforeOut option is set to 0 (non wait before transition to next) and every image has class delayOut2000: the result is that previous slide transition out begin after next slide transition in is completed.

Setup

$('#demoSlider').mbSlider({
  customAnimation: "static", // Slides are not removed from viewport
                             // before transition to next slide
  pauseBeforeOut: 0          // No wait before next transition: previous
                             // slide must fade out after next slide 
                             // trasition is completed.
});

HTML

<!-- Note that every image has a fadeOut with a delay of 2 seconds. This fadeOut is hidden 
     and it's carried out only after the transition of next slide is completed.   -->
<div id="demoSlider" class="mbslider photo-slider">
    <div class="item">
    <img class="animated fadeIn fadeOut delayOut2000" src="https://unsplash.it/1280/720?random&p=1846769700">
  </div>
    <div class="item">
    <img class="animated flipInY fadeOut delayOut2000" src="https://unsplash.it/1280/720?random&p=5672985731">
  </div>
    <div class="item">
    <img class="animated rotateInBig fadeOut delayOut2000" src="https://unsplash.it/1280/720?random&p=3095852153">
  </div>
    <div class="item">
    <img class="animated slideInDown fadeOut delayOut2000" src="https://unsplash.it/1280/720?random&p=2836989701">
  </div>
    <div class="item">
    <img class="animated zoomIn fadeOut delayOut2000" src="https://unsplash.it/1280/720?random&p=2858141898">
  </div>
    <div class="item">
    <img class="animated bounceInUp fadeOut delayOut2000" src="https://unsplash.it/1280/720?random&p=5532011101">
  </div>
    <div class="item">
    <img class="animated lightSpeedIn fadeOut delayOut2000" src="https://unsplash.it/1280/720?random&p=3420420061">
  </div>
    <div class="item">
    <img class="animated rotateInDownLeft fadeOut delayOut2000" src="https://unsplash.it/1280/720?random&p=3444227694">
  </div>
</div>
Torna all'inizio