JSFiddle - React, Tailwind, and code Playground

by Luis Manuel

HTML

<div class="main-padding">
    <div id="wrapper-slider">
        <div class="item-slider item-slider1">1</div>
        <div class="item-slider item-slider2">2</div>
        <div class="item-slider item-slider3">3</div>
    </div>
</div>

CSS

* {
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

body {
    font-size: 62.5%;
}

ul, ol {
    list-style-type: none;
}

.main-padding {
    padding: 20px;
}


#wrapper-slider {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.item-slider {
    position: absolute;
    left: 100%;
    width: 100%;
    height: 100%;
}

.item-slider1 {
    background-color: red;
}

.item-slider2 {
    background-color: blue;
}

.item-slider3 {
    background-color: yellow;
}

JavaScript

$(function () {
    
    var item = ".item-slider";
    var next = 1;
    var current;
    setInterval(function() {
        if(next === 1){
            prev = $(item + 3);
        }else{
            prev = $(item + (next - 1));
        }
        current = $(item + next);
        current.css({"left": "100%"});
        current.animate({"left": "0"}, 1000);
        prev.animate({"left": "-100%"}, 1000);
        if(next === 3){
            next = 1;
        }else{
            next++;
        }
    }, 2000);
    
});