JSFiddle - React, Tailwind, and code Playground

by meetravi

HTML

<div id="wrapper">
        <div id="abc-container">
            <div id="a"></div>
            <div id="b"></div>
            <div id="c"></div>
        </div>
    </div>
    <div id="asas"></div>
    <div id="asass"></div>

CSS

#wrapper {
        width:400px;
        height:140px;
        position:absolute;
        left:50%;
        top:50%;
        margin: -70px 0 0 -200px;
        background: #383838;
        overflow: hidden;
        }

        #abc-container {
        position: absolute;
        width:1200px;
        height:140px;
        }

        #a {
        width:400px;
        height:140px;
        background: #FF0000;
        float: left;
        }

        #b {
        width:400px;
        height:140px;
        background: #FFFF00;
        float: left;
        }

        #c {
        width:400px;
        height:140px;
        background: #00FFFF;
        float: left;    
        }

JavaScript

var firstval = 0;

function Carousel(){
    firstval += 10;
    document.getElementById('abc-container').style.left = "-" + firstval + "px";
    if(firstval == 1200){
        document.getElementById('abc-container').style.left = "0";
        firstval = 0;
        setTimeout(Carousel, 3000);
        return;
    }
    
    if(!(firstval%400)){ //pause every 400px
        setTimeout(Carousel, 3000);
        return;
    }
    
    runCarousel = setTimeout(Carousel, 20);
}

Carousel();