JSFiddle - React, Tailwind, and code Playground

by Long Nguyễn Hoàng

HTML

<div class = "slider">
     <img id="1" src="http://www.placehold.it/500x500"/>
    <img id="2" src="http://www.placehold.it/400x400"/>
    <img id="3" src="http://www.placehold.it/500x500"/>
    <img id="4" src="http://www.placehold.it/400x400""/>
</div>

CSS

.slider {
    width: 100%;
    height: 30%;
    overflow:hidden;
    border: 1px solid black;
    background-image:url("http://test.softvex.com/Slider/Img/loading.gif");
    background-repeat:no-repeat;
    background-position:center;
}

    .slider img {
        display:none;
    }

JavaScript

$(document).ready(function() {
    
    //$('.slider #1').show({right:'0'}, 500);
    $('.slider #1').show('slide',{direction:'right'},500);
    $('.slider #1').delay(5500).hide('slide',{direction:'left'},500);
  
    var sliderTotalImg = $('.slider img').size();    
    var counterIndex = 2;
    
    setInterval(function () {
    
        //$('.slider #' + counterIndex).show({right:'0'}, 500);
        $('.slider #' + counterIndex).show('slide',{direction:'right'},500);
        $('.slider #' + counterIndex).delay(5500).hide('slide',{direction:'left'},500);
        
        if(count==slidecount){
count=1;

}else{
count=count+1;
}
},6500);});