JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<div class="slider_move" style="background: red"></div>
<div class="slider_move" style="background: orange"></div>
<div class="slider_move" style="background: green"></div>
<div class="slider_move" style="background: blue"></div>
<div class="slider_move" style="background: purple"></div>
<div class="slider_move" style="background: black"></div>

CSS

.slider_move {
    width: 190px;
    height: 100px;
}

JavaScript

$(document).ready(function() {
    var $slides = $('.slider_move'),
        slideWidth = $slides.width(),
        numberOfSlides = $slides.length,
        speed = 5000,
        $holder = $slides.wrapAll('<div id="slidesHolder"></div>').css('float','left').parent().width(slideWidth * numberOfSlides);

    setInterval(changePosition, speed);

    function changePosition() {
        $holder.animate({
            'marginLeft': 0 - slideWidth
        }, function() {
            $holder.css('marginLeft', 0).children().first().appendTo($holder);
        });
    }

});