JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="slider">
    <div class="thumbs">
        <div class="thumb active">1</div>
        <div class="thumb">2</div>
        <div class="thumb">3</div>
        <div class="thumb">4</div>
        <div class="thumb">5</div>
        <div class="thumb">6</div>
    </div>
</div>
<div class="buttons">
    <button class="prev">PREV</button>
    <button class="next">NEXT</button>
</div>

CSS

*{
    margin 0;
    padding:0;
}
.slider{
    position:relative;
    width:400px;
    height:100px;
    border:1px solid red;
    margin:0 auto;
}
.thumbs{
    position:absolute;
    width:650px;
    height:90px;
    border:1px solid green;
    top:4px;
    left:0;
}
.thumb{
    display:inline-block;
    float:left;
    width:100px;
    height:85px;
    border:1px solid black;
    margin:2px 2px;
    opacity:0.2;    
}
.active{
    opacity:1;
    border:2px solid blue;
}
.buttons{
    margin:0 auto;
    width:100px;
    height:20px;
}
.next .prev{
    display: block;
    float:left;
}
.clearfix{
    clear:both;
}

JavaScript

'use strict'
function widthSlider(){
    var thumbsShow = 3;
    var tS = thumbsShow * 2;
    var wS = $('.thumb').width() * thumbsShow;
    var Mg = parseInt($('.thumb').css('margin')) * tS;
    var Bd = parseInt($('.thumb').css('border')) * tS;
    var widthSlider = wS + Mg + Bd;
    return widthSlider;
}
function moveLeftThumbs(){
    $('.slider').css('width', widthSlider);
    $('.thumbs').animate({
        left: - widthSlider(),
    }, 5000 );
}
function moveRightThumbs(){
    $('.slider').css('width', widthSlider);
    $('.thumbs').animate({
        left: widthSlider(),
    }, 5000 );
}
$(document).ready(function(){
    console.log('ready');
    moveLeftThumbs();
    moveRightThumbs();
    $('.thumb').click(function(){
        $('.active').removeClass('active');
        $(this).addClass('active');
    });
    $('.prev').click(function(){
       if(!$('.active').prev().length) {
            $('.active').removeClass('active');
            $('.thumb').last().addClass('active');
        } else {
    $('.active').removeClass('active').prev().addClass('active');
        } 
    });
    $('.next').click(function(){
       if(!$('.active').next().length) {
            $('.active').removeClass('active');
            $('.thumb').first().addClass('active');
        } else {
    $('.active').removeClass('active').next().addClass('active');
        } 
    
    });
});