JSFiddle - React, Tailwind, and code Playground

HTML

<div class="up_arrow">up</div>
<div class="content">
    <img src="http://dummyimage.com/150x150/ccc/000.png?text=1">
    <img class="hide" src="http://dummyimage.com/150x150/ccc/000.png?text=2">
    <img class="hide" src="http://dummyimage.com/150x150/ccc/000.png?text=3">
</div>
<div class="down_arrow">down</div>

CSS

.hide {
    display:none;
}

JavaScript

$(".down_arrow").on("click", function ()

{
    var actImage = $("img:visible").index();
    var nextImage = (actImage + 1) < $("img").length ? actImage + 1 : 0;
    $("img:eq(" + actImage + ")").hide();
    $("img:eq(" + nextImage + ")").show();
});
$(".up_arrow").on("click", function ()

{
    var actImage = $("img:visible").index();
    var nextImage = actImage > 0 ? actImage - 1 : $("img").length - 1;
    $("img:eq(" + actImage + ")").hide();
    $("img:eq(" + nextImage + ")").show();
});