JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="turn-left">Left</a>
<a href="#" id="turn-right">Right</a>
<div class="images">
<div id="image-1" class="image-holder">kép1</div>
<div id="image-2" class="image-holder" style="display: none;">kép2</div>
<div id="image-3" class="image-holder" style="display: none;">kép3</div>
<div id="image-4" class="image-holder" style="display: none;">kép4</div>
<div id="image-5" class="image-holder" style="display: none;">kép5</div>
</div>

CSS

div.image-holder {
    margin: 0px;
    width: 100px;
    height: 80px;
    background: green;
    border: 1px solid black;
    float: left;
}

.images {
    width: 510px;
    height: 100px;
}

JavaScript

var index = 1;

$("#turn-left").click(function(event) {
    event.preventDefault();
    $("#image-" + index).hide("slide", { direction: "left" }, 1000);
    index++;
    if (index > 5) {
        index = 1;
    }
    $("#image-" + index).show("slide", { direction: "right" }, 1000);
});

$("#turn-right").click(function(event) {
    event.preventDefault();
    $("#image-" + index).hide("slide", { direction: "right" }, 1000);
    index--;
    if (index <= 0) {
        index = 5;
    }
    $("#image-" + index).show("slide", { direction: "left" }, 1000);
});