JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="jcarousel-list">
  <li class="b-product">Text 1</li>
  <li class="b-product">Text 2</li>
  <li class="b-product">Text 3</li>
  <li class="b-product">Text 4</li>
  <li class="b-product">Text 5</li>
  <li class="b-product">Text 6</li>
  <li class="b-product">Text 7</li>
</ul>
<div class="jcarousel-prev">Назад</div>
<div class="jcarousel-next">Вперёд</div>


  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

CSS

.fourth {
    background: #900;
    color: #fff;
}

.jcarousel-prev,
.jcarousel-next {
    margin-top: 10px;
    display: block;
    background: #090;
    color: #fff;
    cursor: pointer;
}

JavaScript

$(document).ready(function() {

    $('.jcarousel-list .b-product:nth-of-type(4)').addClass('fourth');

    $('.jcarousel-prev').click(function(){
        if($('.jcarousel-prev').hasClass('jcarousel-prev-disabled')) {
            return false;
        }
        else {
            $('.jcarousel-list .fourth').removeClass('fourth').next('li').addClass('fourth')
        }
    })

    $('.jcarousel-next').click(function(){
        if($('.jcarousel-next').hasClass('jcarousel-next-disabled')) {
            return false;
        }
        else {
            $('.jcarousel-list .fourth').removeClass('fourth').prev('li').addClass('fourth')
        }
    })

});