JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imageDiv">
    <div>
        <img src="http://ifanboy.com/wp-content/uploads/2012/03/public_domain_icon_clip_art_9668.jpeg" class="image"/>
    </div>
    <div>
        <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRNdgz5xts4e3lP262ex-PaDSxoQoowWgOsJ124473AkFYx9SRauA" class="image"/>
    </div>
    <div>
        <img src="http://public-domain.zorger.com/squirrel-nutkin/23-color-drawing-of-squirrels-scampering-away-from-bird-chick-public-domain.jpg" class="image" />
    </div>
    <div>
        <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzASEVz3aI2Df0ZlQ2gPRkF70KCneo77CaqYidh6E1k2_BQcAV" class="arrow" />
    </div>
    <div>
        <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHqoO1hQv6sapQcEru0r3WGNq1dDe7TMCbm92Bgnopt5eB2md1" class="leftarrow" />
    </div>
</div>

CSS

.arrow {
    position: absolute;
    width:40px;
    top: 10px;
    left:400px;
}
.leftarrow {
    position: absolute;
    width:40px;
    top: 10px;
    left: 0px;
}

JavaScript

$(document).ready(function () {
    $('img:not(:first)').hide();
    $(".arrow").click(function () {
        $('img:not(:last):visible').
        hide().
        parent().
        next().
        children().
        show();
    });
    $(".leftarrow").click(function () {
        $('img:not(:first):visible').
        hide().
        parent().
        prev().
        children().
        show();
    });
});