JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div id="big-image">
    <img src="http://lorempixel.com/400/200/sports/1/">
    <img src="http://lorempixel.com/400/200/fashion/1/">
    <img src="http://lorempixel.com/400/200/city/1/">
</div>
<div class="small-images">
    <img class="selected" src="http://lorempixel.com/100/50/sports/1/">
    <img src="http://lorempixel.com/100/50/fashion/1/">
    <img src="http://lorempixel.com/100/50/city/1/">
</div>
        <button id="prev">Prev</button>
        <button id="next">Next</button>

CSS

.small-images a, .big-images a {
    display:inline-block
}
.small-images .selected {
    border:1px solid red
}

JavaScript

$(function () {
    //$("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function (e) {
        var $this = $(this),
            index = $this.index();
        $(".small-images img").removeClass('selected');
        $this.addClass('selected');
        //$("#big-image img").eq(index).show().siblings().hide();
    });
    $('#next').click(function(){ 
        var $selected = $('.selected');
        var index = $selected.next('img').index();
        if(index == -1){
            index = 0;
        }
        var $curr = $(".small-images img").eq(index);
        $(".small-images img").removeClass('selected');
        $curr.addClass('selected');
        //$("#big-image img").eq(index).show().siblings().hide();
    });
    
    $('#prev').click(function(){ 
        var $selected = $('.selected');
        var index = $selected.prev('img').index();
        var $curr = $(".small-images img").eq(index);
        $(".small-images img").removeClass('selected');
        $curr.addClass('selected');
        //$("#big-image img").eq(index).show().siblings().hide();
    });
});