JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<ul class="container">
    <li>
        <img src="http://lorempixel.com/100/100" alt="" class="main-image1"/>
        <img src="http://lorempixel.com/100/100" alt="" class="flip-image" />
    </li>
    <li>
        <img src="http://lorempixel.com/100/100" alt="" class="main-image2"/>
        <img src="http://lorempixel.com/100/100" alt="" class="flip-image" />
    </li>
    <li>
        <img src="http://lorempixel.com/100/100" alt="" class="main-image3"/>
        <img src="http://lorempixel.com/100/100" alt="" class="flip-image" />
    </li>
    <li>
        <img src="http://lorempixel.com/100/100" alt="" class="main-image4"/>
        <img src="http://lorempixel.com/100/100" alt="" class="flip-image" />
    </li>
</ul>

CSS

ul{
    list-style:none;
}
li{
 width:100%;
    height:100px;
    display:block;
    position:relative;
}
/* li.flip{
    opacity:0.3;
} */

img {
    overflow: hidden;
    transition-duration: 0.8s;
    
}
img.flip-image{
    opacity:0;
    position:absolute;
    left:0;
    top:0;
}

JavaScript

$(function(){
var len = $("li").length;
var index = 0;

function loop(){
    setTimeout(function() {
        $(".container li:eq("+ index + ")").addClass("flip").siblings().removeClass("flip");
        var fredy1 = $(".container li:eq("+ index + ") img").filter(function(){
            return $(this).css("opacity") == "0";
        });
       var fredy2 = $(".container li:eq("+ index + ") img").filter(function(){
            return $(this).css("opacity") == "1";
        });
        
        fredy2.animate({
        'opacity':0
       }, 450);
        fredy1.delay(600);
        fredy1.animate({
        'opacity':1
       }, 450);
        
        index++;
        if (index == len){
            index=0;
        }
        loop();
    },1000);  
}
   
loop();
});