JSFiddle - React, Tailwind, and code Playground

by Aakash Khapare M

HTML

<div id="new-carousel">
        <div class="perro odd">Item #1</div>
        <div class="perro">Item #2</div>
        <div class="perro odd">Item #3</div>
        <div class="perro">Item #4</div>
        <div class="perro odd">Item #5</div>
        <div class="perro">Item #6</div>
        <div class="perro odd">Item #7</div>
        <div class="perro">Item #8</div>
        <div class="perro odd">Item #9</div>
        <div class="perro">Item #10</div>
        <div class="perro odd">Item #11</div>
        <div class="perro">Item #12</div>
</div>
<button id="changeDirection">Change</button>

CSS

#new-carousel {
    margin:0;
    padding:0;
    position: relative;
}
div.perro {
    height:400px;
    width:400px;
    text-align:center;
    margin:0;
    padding:0;
    background-color: #ccc;
    position: absolute;
    left: 0;
}
div.odd {
    background-color: #4e4e4e;
    color:#fff;
}
#changeDirection{
    position: absolute;
    right: 0;
}

JavaScript

$(function () {
    var exitFromLeft = true;
    var list = $('#new-carousel');
    var perro = $('.perro');
    var delta = 0
    perro.map(function(k, v){
        $(v).css("z-index", delta--);
    });

    function reshuffle(){
        if(exitFromLeft){
            $('#new-carousel .perro:first-child').appendTo('#new-carousel');
            $('#new-carousel .perro:last-child').css('left', 0).css("z-index", delta);
            delta++;
        }
        move();
    }
    
    function move() {
        if (exitFromLeft) {
            $('#new-carousel .perro:first-child').animate({ left: "-" + (400 - delta * 20) +"px"  }, 1500, reshuffle);
        }
    }
    move();

    $("#changeDirection").on("click", function(){
        exitFromLeft = !exitFromLeft;
    });
});