JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="slider">
        <div class='image' id="image_1"></div>
        <div class='image' id="image_2"></div>
        <div class='image' id="image_3"></div>
        <div class='image' id="image_4"></div>
        <div class='image' id="image_5" ></div>
    </div>
    
    <div class="prev" id="backwards">Previous</div>
    <div class="next" id="forward">Next</div>
</div>

CSS

.container{
    width:400px;
    height:200px;
    margin:auto;
    position:relative;
    top:40px;
    border:1px solid #ccc;
    overflow:hidden;
}

.slider{
    position:absolute;
    width:400%;
    height:100%;
    left:-100px;
}

.image{
    float:left;
    width:200px;
    height:100%;
}

#image_1, #image_1bis{ background:yellow; }
#image_2{ background:green; }
#image_3{ background:pink; }
#image_4{ background:#ccc; }
#image_5, #image_5bis{ background:blue; }

.prev, .next{
    position:absolute;
    bottom:10px;
    width:100px;
    background:white;
    text-align:center;
    cursor:pointer;
}

.next{
    left:auto !important;
    right:0px;
}

.selected {
    color: #efafaf;
}

.pagination{
    width:200px;
    text-align:center;
    position:absolute;
    left:100px;
    background:black;
    color:white;
    bottom:10px;
}

.page{
    display:inline-block;
    margin-left:10px;
    cursor:pointer;
}

JavaScript

var current = 1;
    $slider = $(".slider"),
    nbImages = $slider.find("div").length;
    
$slider.prepend("<div class='image' id='image_" + nbImages + "bis' ></div>");
$slider.append("<div class='image' id='image_1bis' ></div>");


$(".page, .prev, .next").on("click", function() {
    
    move_to = $(this).attr("id");
    alert(move_to);
    anime_slider(move_to);
});


function anime_slider(position) {
    var image_width = 200,
        newPosition;
        
    if(position.substring(0, 4) === "move") {
        newPosition = position.substr(5);
    } else {
        newPosition = current + ( position === "forward" ? 1 : -1 );
    }
    
    
    if(newPosition > nbImages) newPosition -= nbImages;
    if(newPosition <= 0) newPosition += nbImages;
    
    left = ( newPosition - 0.5 ) * image_width;

    $(".selected").removeClass("selected");
    $("#move_" + newPosition).addClass("selected");

    $slider.animate({
        left: "-" + left + "px"
    }, 600, function() {
        current = newPosition;
    });
}