JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "slider">
     <img id="1" src="http://test.softvex.com/Slider/Img/photography/001.jpg"/>
    <img id="2" src="http://test.softvex.com/Slider/Img/photography/003.jpg"/>
</div>

CSS

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

    .slider img {
        width:100%;
        height:400px;
        display:none;
    }

JavaScript

$(document).ready(function() {
    
    $('.slider #1').show({right:'0'}, 500);
    $('.slider #1').delay(5500).hide('slide', 'linear', 500);

    var sliderTotalImg = $('.slider img').size();
    var counterIndex = 2;

    setInterval(function () {
        $('.slider #' + counterIndex).show({right:'0'}, 500);
        $('.slider #' + counterIndex).delay(5500).hide('slide', 'linear', 500);

        if (counterIndex == sliderTotalImg) {
            //reset counter
            counterIndex = 1;
        }
        else {
            counterIndex = counterIndex + 1;
        }
    },6500);
    
});