Automatico animato

Autoslide con animazioni personalizzate

Slider automatico con pulsanti di controllo che utilizza transizioni personalizzate.  Il valore di customAnimation è impostato su slide . Le diapositive vengono rimosse dalla finestra prima della transizione alla diapositiva successiva. Così ogni transizione è da e per schermo vuoto.

HTML

<div id="demoSlider" class="mbslider">
  <div class="item"><img class="animated zoomIn zoomOut" src="https://unsplash.it/1280/720?random&p=4688347394"></div>
  <div class="item"><img class="animated fadeInDown fadeOutUp" src="https://unsplash.it/1280/720?random&p=2669632590"></div>
  <div class="item"><img class="animated rotateInBig rotateOutBig" class="animated zoomIn zoomOut" src="https://unsplash.it/1280/720?random&p=3035081494"></div>
  <div class="item"><img class="animated bounceIn bounceOut" src="https://unsplash.it/1280/720?random&p=5845949721"></div>
  <div class="item"><img class="animated bounceInRight bounceOutLeft" src="https://unsplash.it/1280/720?random&p=4589385729"></div>
  <div class="item"><img class="animated flipInY flipOutY" src="https://unsplash.it/1280/720?random&p=5855544692"></div>
</div>

JavaScript

<script>
  $(document).ready(function($){
    var slider = $('#demoSlider').mbSlider({
      auto: true,
      autoControls: true,
      customAnimation: "slide",
      pauseBeforeOut:1500
    });
  });
</script>
Torna all'inizio