JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div class="largethumb">
    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
    <a class="left" href="#"> Left </a>
    <a class="right" href="#"> right </a> 
</div>  <!-- End largeImage -->

<div class="thumbgallery clearfix">
    
    <div class="thumb active">
        <a href="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg">
            <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg"/>
        </a>
   </div>
    <div class="thumb">
        <a href="http://sstatic.net/stackoverflow/img/tag-android.png">
            <img src="http://sstatic.net/stackoverflow/img/tag-android.png"/>
        </a>
    </div>
    <div class="thumb">
        <a href="http://sstatic.net/stackoverflow/img/tag-android.png">
            <img src="http://sstatic.net/stackoverflow/img/tag-android.png"/>
        </a>
    </div>
    <div class="thumb">
        <a href="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg">
            <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
        </a>
    </div>
  </div> <!-- End thumbgallery -->

CSS

.largethumb{
    height:300px;
    width:600px;
    border:1px solid red;
    margin-bottom:100px;
    position:relative;
    margin:10px auto;
}
.largethumb a{
    border:1px solid red;
    position:absolute;
    top:50%;
    padding:10px;
    color:red;
    cursor:pointer;
}
.largethumb a.left{
    left:-60px;
}
.largethumb a.right{
    right:-60px;
}
.thumbgallery{
    margin:10px auto;
}
.thumbgallery .thumb{
    width:100px;
    height:100px;
    border:1px solid red;
    float:left;
    margin:10px;
}
.clearfix{
    clear:both;
    
}
.clearfix:after{
    clear:both;
    content:"";
    display:table;
}
div img{
    width:100%;
    height:100%;
}
.thumb.active{
    border:2px solid green;
}

JavaScript

$(".thumbgallery .thumb a").click(function(e) {
    $(this).parents('.thumb').addClass("active").siblings().removeClass('active');
    var href = $(this).attr("href");
    $(".largethumb img").attr("src",href);
    e.preventDefault();
    return false;
});

$(".largethumb a.left").click(function(){
        <!-- how use laregimage move and smallimage is active -->
});
$(".largethumb a.right").click(function(){
        <!-- how use laregimage move and smallimage is active -->
});