Esempio di base animato

Panoramica

Slide show manuale con transizioni personalizzate. L'opzione di configurazione customAnimation è impostata su static: le diapositive non vengono rimosse dallo schermo e rimangono visibili durante la transizione alla diapositiva successiva. Si noti che l'opzione di configurazione pauseBeforeOut è impostata su 0 (nessuna attesa prima della transizione successiva) e ogni immagine ha una classe delayOut2000  che ritarda la transizione in uscita.

Impostazione

$('#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