JSFiddle - React, Tailwind, and code Playground

by asif097

HTML

<script src="http://labs.bigroomstudios.com/source/js/animo.js"></script>
<link rel="stylesheet" href="http://labs.bigroomstudios.com/source/css/animate+animo.css">
<ul id="slideshow">
    <li><div>one</div></li>
    <li><div>two</div></li>
    <li><div>three</div></li>
</ul>

CSS

#slideshow > li {
    display:none;
    background: blue;
    color:white;
    padding: 20px;
    width:200px;
    text-align:center;
    overflow:hidden;
    position:relative;
}

#slideshow > li div {
    background:green;
    position:absolute;
    width:200px;
    top:10px;
}

JavaScript

var $slideshowItems = $('#slideshow').find('li'), 
    i = 0;

(function loop() {

    $slideshowItems.eq( i ).fadeIn(0, function(){
        
        $(this).find('div').animo( {animation: "bounceInLeft", duration: 1});
        
    }).delay(6000).fadeOut(0, loop);
    
    i = ++i % $slideshowItems.length;
    

})();