JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container my-4">

  <div class="row">

    <div class="col-md-10 offset-md-1">

      <!--Carousel Wrapper-->
      <div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">

        <!--Upper Level-->
        <div>
          <!--Slides-->
          <div class="carousel-inner" role="listbox">
            <!--Image 1-->
            <figure class="carousel-item active">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 1-->
            <!--Image 2-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISnycr737jx2lc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 2-->
            <!--Image 3-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS7m837qy2h8lc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 3-->
           ...

CSS

body {
  background-color: #ccc;
}

#slideBack1>.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

#slideNext1>.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

#scoll_pane {
position: relative;
}
#slideBack1, #slideNext1 {
z-index: 16;
background: yellow;
}

.carousel-control-prev {
  background-color: red;
}

.carousel-control-next {
  background-color: green;
}

.carousel-indicators {
  overflow: auto;
  overflow-y: hidden;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
  position: relative !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.carousel-indicators::-webkit-scrollbar {
  display: none;
}

.carousel-indicators li {
  height: 3.75rem !important;
  width: 5rem !important;
}

ol li img.img-tn {
  height: 100%;
  display: block;
  object-fit: cover;
  padding: 0.10rem;
}

.carousel-control-prev-icon-thumbs {}

.carousel-control-next-icon-thumbs {}

.carousel-inner {
  width: 100%;
  height: 75%;
}

figure picture img.image-cover {
  width: 100%;
  height: 25rem;
  object-fit: cover;
}

JavaScript

window.addEventListener('load', function() {
  var button = document.getElementById('slideBack1');
  var container = document.getElementById('carousel_indicators');

  button.addEventListener("click", function(event) {
    event.preventDefault();
    sideScroll(container, 'left', 25, 100, 10); //right->left
  });

  var back = document.getElementById('slideNext1');
  back.addEventListener("click", function(event) {
    event.preventDefault();
    sideScroll(container, 'right', 25, 100, 10);//left->right
  });

  function sideScroll(element, direction, speed, distance, step) {
    scrollAmount = 0;
    var slideTimer = setInterval(function() {
      if (direction == 'left') {
        element.scrollLeft -= step;
      } else {
        element.scrollLeft += step;
      }
      scrollAmount += step;
      if (scrollAmount >= distance) {
        window.clearInterval(slideTimer);
      }
    }, speed);
  }
});