JSFiddle - React, Tailwind, and code Playground

HTML

<button class="prev">Previous</button>
<div id="images">
    <div>img</div>
</div>
<button class="next">Next</button>

CSS

button {
    float: left;   
}
#images div {
    border: 1px solid #000;
    float: left; 
    height:100px;
    margin: 5px;
    text-align: center;
    width: 100px;
}

JavaScript

$(function () {
    var images = ["img_1", "img_2", "img_3", "img_4", "img_5", "img_6", "img_7", "img_8", "img_9", "img_10"],
        curIndex = 0,
        gotoImage = function (index) {
            $('#images div').each(function (i) {
               var image = curIndex + i;
                if (image >= images.length) {
                    image = image - images.length;
                }
               $(this).html(images[image]);
            });            
        };
    
    $('.prev').click(function (e) {
        curIndex--;
        if (curIndex === -1) {
            curIndex = images.length - 1;
        }
        gotoImage(curIndex);
    });
    
    $('.next').click(function (e) {
        curIndex++;
        if (curIndex === images.length) {
            curIndex = 0;
        }
        gotoImage(curIndex);
    });
    
});