JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slide-show">
    <div class="main-slide"></div>
    <div class="slide-list">
        <div class="img">1</div>
        <div class="img">2</div>
        <div class="img">3</div>
        <div class="img">4</div>
    </div>
</div>
<div class="clear"></div>
<div class="left">&larr;</div>
<div class="right">&rarr;</div>

CSS

.clear {
    clear: both;
}
.slide-list {
    width: 208px;
    border: 1px solid green;
    text-align: center;
    overflow: auto;
}
.slide-list .img {
    height: 50px;
    width: 50px;
    border: 1px solid red;
    float: left;
}
.main-slide {
    width: 208px;
    height: 180px;
    border: 1px solid blue;
}
.active {
    background-color: green;
}

JavaScript

$('.slide-list .img:first-child').addClass('active').clone()
    .appendTo('.main-slide');

$('.slide-list .img').click(function () {
    $('.slide-list .img').removeClass('active');
    $(this).addClass('active');
    $('.main-slide').empty();
    $(this).clone().appendTo('.main-slide');
});

$('.right').click(function () {
        $('.main-slide').empty();
    if($('.active.img').next().length > 0){
        $('.active.img').removeClass('active')
            .next()
            .addClass('active').clone().appendTo('.main-slide');
    }
    else
    {
      
        $('.active.img').removeClass('active');
       $('.img').first().addClass('active').clone().appendTo('.main-slide');
    }
});