JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myCarousel-1" class="carousel slide hidden-xs">
  <div class="carousel-inner">
    <div class="item active">
      <div class="row" style="padding-left: 15px;">
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
      </div>
    </div>
    <div class="item">
      <div class="row" style="padding-left: 15px;">
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
      </div>
    </div>
    <div class="item">
      <div class="row" style="padding-left: 15px;">
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div...

JavaScript

$(".carousel").carousel({
  interval: false,
  wrap: false
});

$('.carousel').on('slide.bs.carousel', function (obj) {
    //get current carousel
    var $CAR=$(this);
    
    //get curent slide index
    var currItem = $(obj.relatedTarget).index();
    //get the total number of slides
    var countItem = $CAR.find('.item').size();
    
    //if the current slide last, hide right arraow
    //otherwise show right arraow
    if(currItem==countItem-1) 
        $CAR.children(".right").hide();
    else
        $CAR.children(".right").show();
    
    //if the current slide first, hide left arraow
    //otherwise show left arraow
    if(currItem==0) 
        $CAR.children(".left").hide();
    else
        $CAR.children(".left").show();
    
    //console.log(currItem+'/'+countItem);
   
})