Auto Animated

Autoslide with custom animations

Autoplay slider with control buttons using custom transitions with customAnimation option set to slide. Slides are removed from viewport before trasition to next slide. So any transition is from and to blank.

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