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').show('slide', 'linear', 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).show('slide', 'linear', 500);
        $('.slider #' + counterIndex).delay(5500).hide('slide', 'linear', 500);
    
        if (counterIndex == sliderTotalImg) {
            //reset counter
            counterIndex = 1;
        }
        else {
            counterIndex = counterIndex + 1;
        }
    },6500);});