JSFiddle - React, Tailwind, and code Playground

HTML

<div class="up_arrow">up</div>
<div class="content">
    <img src="image_one" class="i1">
    <img src="image_two" class="i2">
    <img src="image_three" class="i3">
</div>
<div class="down_arrow">down</div>

CSS

img {
    width: 200px;
    height: 200px;
    display: none;
}
img.i1 {
    background: #00ff00;
    display: inline;
}
img.i2 {
    background: #ff0000;
}
img.i3 {
    background: #0000ff;
}

JavaScript

$('div.up_arrow').on('click', function() {
    var $actImg = $(this).siblings('div.content').find('img:visible');
    if(!$actImg.is(':first-child')) {
        $actImg.hide();
        $actImg.prev().show();
    }
});
                     
$('div.down_arrow').on('click', function() {
    var $actImg = $(this).siblings('div.content').find('img:visible');
    if(!$actImg.is(':last-child')) {
        $actImg.hide();
        $actImg.next().show();
    }
});