JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<div class="container">
    <div class="largethumb">
        <img src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg">
        <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="1.jpg"><img src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg"></a></div>
        <div class="thumb"><a href="1.jpg"><img src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg"></a></div>
        <div class="thumb"><a href="1.jpg"><img src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg"></a></div>
        <div class="thumb"><a href="1.jpg"><img src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg"></a></div>
        <div class="thumb"><a href="1.jpg"><img src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg"></a></div>
    </div> <!-- End thumbgallery -->
</div>

CSS

.container{
           width: 720px;
           padding: 20px;
           margin: 0 auto;
       }
       .largethumb{
           height:300px;
           width:600px;
           margin-bottom:100px;
           position:relative;
           margin:10px auto;
       }
       .largethumb a{
           position:absolute;
           top:50%;
           padding:10px;
           color:red;
       }
       .largethumb img{
           width: 100%;
           height: 100%;
       }
       .largethumb a.left{
           left:-10px;
           background-color: #fff;
           color: #000;
       }
       .largethumb a.right{
           right:-10px;
           background-color: #fff;
           color: #000;
       }
       .largethumb a.move{
           background-color: red;
           color: #fff;
       }
       .thumbgallery .thumb{
           width:100px;
           height:75px;
           float:left;
           margin:10px;
           padding: 10px;
           overflow: hidden;
       }
       .thumbgallery .thumb.active{
           background-color: red;
       }
       .thumbgallery .thumb img{
           width: 100%;
       }
       .clearfix{
           clear:both;
 
       }
       .clearfix:after{
           clear:both;
           content:"";
           display:table;
       }

JavaScript

$(document).ready(function(){
           $(".thumbgallery .thumb a").click(function(e) {
               $(this).parents('.thumb').addClass("active").siblings().removeClass('active');
               var thumbsrc = $(this).find('img').attr("src");
               $(".largethumb img").attr("src",thumbsrc);
               e.preventDefault();
               return false;
           });
 
           $(".largethumb a.left").click(function(){
               $(this).addClass('move');
               $("a.right").removeClass('move');
               var $target = $(".active").next();
               if($target.length > 0) {
                   $target.find("img").click();
               } else {
                   $('.thumb img').first().click(); // go to first image
               }
           });
           $(".largethumb a.right").click(function(){
               $(this).addClass('move');
               $("a.left").removeClass('move');
               var $target = $(".active").prev();
               if($target.length > 0) {
                   $target.find("img").click();
               } else {
                   $('.thumb img').last().click(); // go to last image
               }
           });
       });