JSFiddle - React, Tailwind, and code Playground

by brian

HTML

<div class="slider">
                <img id="1" src="http://www.placehold.it/500x300&text=Slide1" alt="TV Deals"/>
                <img id="2" src="http://www.placehold.it/500x300&text=Slide2" alt="Furniture Deals"/>
                <img id="3" src="http://www.placehold.it/500x300&text=Slide3" alt="Electronic Deals"/>
            </div>

CSS

.slider {
    width: 990px;
    height: 270px;
    overflow: hidden;
    margin: 30px auto;
    background-image: url('../Images/ajax-loader.gif');
    background-repeat: no-repeat;
    background-position: center;
}

.slider img{
    border: 0;
    display: none;
}

JavaScript

$(document).ready(function () {
    slider();
});

function slider(){
    var count = 1;
    
    $('#1').show();
    
    (function slide(){
        $('.slider img').hide();
        
        if (count > 3) {count = 1;} // makes this a loop
        
        $('#'+count).fadeIn('slow');
        count += 1;
        
        setTimeout(function () {
            slide();
        }, 5000);
    })();
}