JSFiddle - React, Tailwind, and code Playground

by tmyie

HTML

<div class="container">
    <div class="all-slides">
        <div class="slide">
            <img src="http://placehold.it/150x150&text=1" alt="" />
        </div>
        <div class="slide">
            <img src="http://placehold.it/150x150&text=2" alt="" />
        </div>
        <div class="slide">
            <img src="http://placehold.it/150x150&text=3" alt="" />
        </div>
        <div class="slide">
            <img src="http://placehold.it/150x150&text=4" alt="" />
        </div>
        <div class="slide">
            <img src="http://placehold.it/150x150&text=5" alt="" />
        </div>
        <div class="slide">
            <img src="http://placehold.it/150x150&text=6" alt="" />
        </div>
        <div class="slide">
            <img src="http://placehold.it/150x150&text=7" alt="" />
        </div>
        <div class="slide">
            <img src="http://placehold.it/150x150&text=8" alt="" />
        </div>
        <div class="slide">
            <img src="http://placehold.it/150x150&text=9" alt="" />
        </div>
    </div>
</div>
<a href="#" class="left">Move Left</a>

<a href="#" class="right">Move Right</a>

CSS

img {
    height: 100%;
}
.all-slides {
    position: relative;
}
.container {
    height: 150px;
    border: 1px solid red;
    overflow: hidden;
    white-space: nowrap;
}
.slide {
    height: 150px;
    background-color: #fff;
    display: inline-block;
    font-size: 0;
}
.right {
    float: right;
}

JavaScript

var go;
i = 0;

var moveRight = function () {
    $('.all-slides').animate({
        left: '-=10'
    }, 100);
    i++;
    console.log(i);

    if ((i % 50) == 0) {
        $('.slide').clone().appendTo('.all-slides');
    }
};

var moveLeft = function () {
    $('.all-slides').animate({
        left: '+=10'
    }, 100);
    i--;
    console.log(i);
    
        if ( i == -1 || (i % 50) == 0) {
        $('.slide').clone().prependTo('.all-slides');
    }
};


$('.right').mousedown(function () {
    go = setInterval(moveRight, 100);

}).mouseup(function () {
    clearInterval(go);
});

$('.left').mousedown(function () {
    go = setInterval(moveLeft, 100);

}).mouseup(function () {
    clearInterval(go);
});