JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div id="slider">
    <div class="slider-box">
        <div class="fullImg" id="prev"></div>
        <div class="fullImg" id="current"></div>
        <div class="fullImg" id="next"></div>
    </div>
</div>
<div class="btn-line">
    <div class="btn" id="prev-btn">Prev</div>
    <div class="btn" id="next-btn">Next</div>
    <div class="clearfix"></div>
</div>
<div id="thumbnails" class="smallImg">
    <div class="thumbnail active"><img src="http://hd.wallpaperswide.com/thumbs/tornado_4-t2.jpg" /></div>
    <div class="thumbnail"><img src="http://hd.wallpaperswide.com/thumbs/rome_3-t2.jpg" /></div>
    <div class="thumbnail"><img src="http://hd.wallpaperswide.com/thumbs/the_heart_of_the_mountain-t2.jpg" /></div>
    <div class="thumbnail"><img src="http://hd.wallpaperswide.com/thumbs/lamborghini___lonely_side-t2.jpg" /></div>
    <div class="thumbnail"><img src="http://hd.wallpaperswide.com/thumbs/amazing_sunset_in_vally-t2.jpg" /></div>
    <div class="thumbnail"><img src="http://hd.wallpaperswide.com/thumbs/stormy_atmosphere_of_merphlyn-t2.jpg" /></div>
</div>

CSS

*{
    padding:0;
    margin:0;
}
.clearfix{clear:both;}

#slider{
    position:relative;
    display:block;
    width:100px;
    height:100px;
    border:1px solid red;
    margin:0 auto;
}
.slider-box{
    position:absolute;
    width:300px;
    height:100px;
    left:0px;
}
.fullImg{display:inline-block; position:absolute;width:100px; height:100px;}
#current{
    left:0;
    top:0;
}
#current img {
	width: 100%;
}
#prev{
    left:-100px;
    top:0;
    border:1px solid green;
}
#next{
    left:100px;
    top:0;
    border:1px solid blue;
}
.btn-line{width:150px;margin:0 auto;}
.btn{
    cursor:pointer;
    display:inline;
}

#prev-btn{float:left;}
#next-btn{float:right;}
#thumbnails{
    width:310px;
    height:50px;
    overflow:hidden;
    border:1px solid blue;
    margin:0 auto;
}
.thumbnail{
    display:inline-block;
    width:25px;
    height:25px;
    line-height:25px;
    border:10px solid black;
    margin:1.5px;
    text-align:center;
    opacity:0.3;
    cursor:pointer;
    -webkit- transition:all .5s ease;
    transition:all .5s ease;
}
.thumbnail img, #slider img {
	width: 100%;
}
.active {opacity:1;}
.thumbnail:hover{
    opacity:1;
}

JavaScript

$(document).ready(function(){
	updateImages('.active');
    $('.thumbnail').click(function(){
		updateImages(this);
        $('#thumbnails .active').removeClass('active');
        $(this).addClass('active');
    });
    $('#prev-btn').click(function(){
    	if(!$('.active').prev().length) {
	        $('.active').removeClass('active');
	        $('.thumbnail').last().addClass('active');
        } else {
        	$('.active').removeClass('active').prev().addClass('active');
        }
        animateFromRight();
        updateImages('.active');
    });
    $('#next-btn').click(function(){
    	if(!$('.active').next().length) {
	        $('.active').removeClass('active');
	        $('.thumbnail').first().addClass('active');
    	} else {
	        $('.active').removeClass('active').next().addClass('active');
    	}
        animateFromLeft();
        updateImages('.active');
    });
     
    function updateImages(selector) {
    	$('#current').html($(selector).html());
    	if(!$(selector).prev().length) {
    		$('#prev').html($('.thumbnail').last().html());
        } else {
    		$('#prev').html($(selector).prev().html());
        }
        if(!$(selector).next().length) {
    		$('#next').html($('.thumbnail').first().html());
        } else {
    		$('#next').html($(selector).next().html());
        }
    }
    function nextInCurrent(){
        $('#current').html($('#next').html());
    }
    
    function animateFromLeft(callback) {
        $('#next').animate({
            left: 0
        }, 1000, callback);
        $('#next').animate({
            left: 100
        }, 1, callback);
    }    

    function animateFromRight(callback) {
        $('#prev').animate({
            left: 0
        }, 1000, callback);
        $('#prev').animate({
            left: -100
        }, 1, callback);
    }
});