JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
    <div id="wrapper">
        <div class="fullImg" id="pprev"></div>
        <div class="fullImg" id="prev"></div>
        <div class="fullImg" id="current"></div>
        <div class="fullImg" id="next"></div>
        <div class="fullImg" id="nnext"></div>
        <div class="clearfix"></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;}
#wrapper {
    position: absolute;
    height: 100px;
    left: -100px;
    overflow: hidden;
    width: 520px;
}
#prev {
}
#slider{
    position: relative;
    width:302px;
    height:100px;
    overflow: hidden;    
    border:1px solid red;
    margin:0 auto;
}
.fullImg{
    float: left;   
    width:100px; 
    height:100px;
    border-right: 1px solid red;
}
.fullImg img {
	width: 100%;
}
.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');
        }
        var current_left = parseInt($('#wrapper').css('left'));
        $('#wrapper').animate({left: current_left + 100}, 500);
        $('#wrapper').css('left', (current_left - 100) + 'px');
        updateImages('.active');
    })
    $('#next-btn').click(function(){
    	if(!$('.active').next().length) {
	        $('.active').removeClass('active');
	        $('.thumbnail').first().addClass('active');
    	} else {
	       $('.active').removeClass('active').next().addClass('active');
    	}
        var current_left = parseInt($('#wrapper').css('left'));
        $('#wrapper').animate({left: current_left - 100}, 500);
        updateImages('.active');
    })
    function updateImages(selector) {
    	$('#current').html($(selector).html());
    	if(!$(selector).prev().length) {
    		$('#prev').html($('.thumbnail').last().html());
            $('#pprev').html($('.thumbnail').last().prev().html());
        } else if ($(selector).prev().length && !$(selector).prev().prev().length) {
    		$('#prev').html($(selector).prev().html());
            $('#pprev').html($('.thumbnail').last().html());
        } else {
            $('#prev').html($(selector).prev().html());
            $('#pprev').html($(selector).prev().prev().html());
        }
        
        if(!$(selector).next().length) {
    		$('#next').html($('.thumbnail').first().html());
            $('#nnext').html($('.thumbnail').first().next().html());
        } else if ($(selector).next().length && !$(selector).next().next().length)...