JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<div>
<ul>
   <li class="thumb"></li>
   <li class="thumb chosen"></li>
   <li class="thumb"></li>
   <li class="thumb"></li>
</ul>
</div>
<div>
<button class="prev-image">Previous</button>
<button class="next-image">Next</button>
</div>

CSS

.thumb {
    width: 100px;
    height: 100px;
    background: blue;
    margin: 5px;
}

.chosen {
    background: red !important;
}

JavaScript

$('.prev-image').click( function() {
    $('.thumb.chosen').prev().trigger('click');

});
$('.next-image').click( function() {
    $('.thumb.chosen').next().trigger('click');
});

$(".thumb").click(function () {
    $(".thumb").removeClass("chosen");
    $(this).addClass("chosen");
});