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 currentPosition = 0;
    var slideWidth = 190;
    var slides = $('.slider_move');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 5000;

    slideShowInterval = setInterval(changePosition, speed);
    slides.wrapAll('<div id="slidesHolder"></div>')
    slides.css({
        'float': 'left'
    });
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);

    function changePosition() {
        if (currentPosition > 0) {
            $('#slidesHolder').css('marginLeft',0)
                .children().first().appendTo('#slidesHolder');
        } else {
            currentPosition += 1;
        }
        moveSlide();
    }

    function moveSlide() {
        $('#slidesHolder').animate({
            'marginLeft': slideWidth * (-currentPosition)
        });
    }
});