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'

$(document).r$( ".thumbs" ).animate({
            left: -140,
              }, 500, function() {
            // Animation complete.
          });eady(function(){
    console.log('ready');
    $('.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');
        } 
    
    });
    
    $('.next').click(function() {
        if( $('.active').offset().left > ( $('.slider').offset().left + $('.slider').width() ) ) {
            $( ".thumbs" ).animate({
            left: -140,
              }, 500, function() {
            // Animation complete.
          });
        }
    });
    
    
    
    
    $('.prev').click(function() {
        if( $('.active').offset().left > ( $('.slider').offset().left + $('.slider').width() ) ) {
            var lastThumb = $('.thumb').last();
            if($('.thumb').is lastThumb){
             $( ".thumbs" ).animate({
                 left: -500,
              }, 500, function() {
            // Animation complete.
          });
            
            }
            $( ".thumbs" ).animate({
            left: -140,
              }, 500, function() {
            // Animation complete.
          });
        }
    });
});