JSFiddle - React, Tailwind, and code Playground

by mparvez1986

HTML

<div id="sldvid1" class="slider">
    <img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
    <img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
    <img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
<hr>
<div id="sldvid2" class="slider">
    <img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
    <img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
    <img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>

CSS

.slider {
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.slider img {
    display: none;
    width: 100%;
    position: absolute;
}

.slider .active {
    display: inline-block;
}

.slider .sliding {
    display: inline-block;
}

JavaScript

var timer = setInterval(runSlide, 2000);

function runSlide() {
    // Slide each slider on the page.
    $(".slider").each(function (index, element) {
        // Get the elements involved in the slide.
        var numChildren = $(this).children().length;
        var activeChild = $(this).children(".active");
        var activeSlideTo = $(activeChild).attr("data-slide-to");
        var nextSlideTo = (parseInt(activeSlideTo) + 1) % numChildren;
        var nextChild = $(this).find("*[data-slide-to=" + nextSlideTo + "]");
        
        // Prepare for slide.
        $(activeChild).css("margin-left", "0%");
        $(nextChild).css("margin-left", "100%");
        $(activeChild).addClass("sliding");
        $(nextChild).addClass("sliding");
        $(activeChild).removeClass("active");
        
        // Slide using CSS margin-left.
        $(activeChild).animate({"margin-left": "-100%"}, 1000, function () {
            $(this).removeClass("sliding");
        });
        $(nextChild).animate({"margin-left": "0%"}, 1000, function () {
            $(this).addClass("active");
            $(this).removeClass("sliding");
        });
    });
}