JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="next">next</div>
<div class="previous">prev</div>

<div class="main-slider">

  <div  class="slide current"></div>
  <div class="slide "></div>
  <div class="slide  " ></div>
  <div class="slide "></div>
  <div class="slide "></div>

</div>

CSS

.slide {
    display: block;
    width: 80px;
    height: 80px;
    margin: 5px;
    background: #bfa;
    float: left;
    font-size: 14px;
  }
  div#small {
    width: 60px;
    height: 25px;
    font-size: 12px;
    background: #fab;
  }
  .prv{
    background:#000;
  }
    .nxt{
    background:#ed3c3c;
  }
      .current{
    background:#fff;
  }
  
  
  .next{
    position:absolute;
    width:30px;
    height:30px;
    right:0;
background: #c7c7c7;
  }
    .previous{
    position:absolute;
    width:30px;
    height:30px;
    left:0;
background: #c7c7c7;
  }

JavaScript

var update = function() {

$(".current").prev().addClass("prv");
  $(".current").next().addClass("nxt");
    if( ! $(".current + div").length ) $('.slide').first().addClass("nxt"); // current is last
  if( ! $(".current").prev().length ) $('.slide').last().addClass("prv") // current is firs

};

$(".main-slider").ready(function(){

  update();

});


$('.next').click(function() {

    $('.current').removeClass('current');
    $( ".nxt" ).addClass( "current" ).removeClass( "nxt" );
    $( ".prv" ).removeClass( "prv" );
    
    update();

});


$('.previous').click(function() {

    $('.current').removeClass('current');
    $( ".prv" ).addClass( "current" ).removeClass( "prv" );
    $( ".nxt" ).removeClass( "nxt" );
    
    update();

});