JSFiddle - React, Tailwind, and code Playground

by tmyie

HTML

<div class="container">
    <div class="slides">
        <div class="img">1</div>
        <div class="img">2</div>
        <div class="img">3</div>
    </div>
    <div class="next">&rarr;</div>
</div>
<div class="thumb">
        <div class="img">1</div>
        <div class="img">2</div>
        <div class="img">3</div>
    </div>

CSS

.slides {
    height: 100px;
    width: 100px;
    border: 1px solid green;
    position: relative;
}
.container {
    border: 1px solid red;
}
.container .img {
    width: 100px;
    height: 100px;
    background-color: orange;
    border: 1px solid blue;
    position: absolute;
    opacity: 0.8;
    font-size: 18px;
}
.next {
    position: absolute;
}

.thumb .img {
    
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 1px solid red;
    margin-top: 25px;
}

JavaScript

var theImg = $('.img');

theImg.first().siblings(theImg).hide();
$('.next').click(function(){
    $(this).closest('.container').find('.slides > .img:visible').hide().next().fadeIn();
    if ($('.img:visible').length === 0) { $('.img:first-child').fadeIn(); }

});