JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-9">

      <div id="products-carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000" style="">
        <ol class="carousel-indicators carousel-indicators-numbers">
          <li class="carousel-indicator-item active" data-target="#products-carousel" data-slide-to="0">1</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="1">2</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="2">3</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="3">4</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="4">5</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="5">6</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="6">7</li>
        </ol>
        <div class="carousel-inner">

          <div class="carousel-item active">
            <a class="clickable-card" href="#">
              <div id="">
                <img src="https://via.placeholder.com/600x400" class="d-block carousel-img img-fluid mx-auto">
              </div>
            </a>
            <div class="carousel-caption c-captions">
              <h3 class="c-title">1</h3>
              <p class="caption-text" id="">text</p>
            </div>
          </div>

          <div class="carousel-item">
            <a class="clickable-card" href="#">
              <div id=""><img src="https://via.placeholder.com/600x400" class="d-block carousel-img img-fluid mx-auto"></div>
           ...

CSS

/* Carousel */

.nav-btns {
  width: 6%;
  opacity: 1;
  background: #11375c;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.nav-btns:hover {
  width: 6%;
  opacity: 1;
  background: #bc0a29;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

#products-carousel {
  background: #222222;
}

.carousel-img {
  height: 68vh;
}

.carousel-caption {
  background: rgba(34, 33, 32, 0.8);
}

.carousel-indicators-numbers li {
  text-indent: 0;
  text-align: center;
  line-height: 20px;
  height: 20px;
  width: 20px;
  color: white;
  background-color: #333;
  opacity: 1;
  /*   color: #fff; */
  /*   background-color: #999; */
  transition: all 0.25s ease;
}

.carousel-indicators-numbers li.visited,
.carousel-indicators-numbers li:hover,
.carousel-indicators-numbers li.active {
  background-color: #45668E;
  color: white;
}

/* Carousel caption animation */
.c-captions {
  opacity: 0;
}

.carousel-item.active .carousel-caption {
  animation: animate-carousel-title 1s normal forwards;
}

@keyframes animate-carousel-title {
  0% {
    transform: translate(0, -2em);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* Animation for title and subtitle text */
.c-title {
  opacity: 0;
}

.c-subtitle {
  opacity: 0;
}

.caption-text {
  opacity: 0;
}

.carousel-item.active .c-title {
  animation: animate-carousel-c-title 1s normal forwards;
  animation-delay: 1s;
}

.carousel-item.active .c-subtitle {
  animation: animate-carousel-c-title 1s normal forwards;
  animation-delay: 1s;
}

.carousel-item.active .caption-text {
  animation: animate-carousel-c-subtitle 1s normal forwards;
  animation-delay: 2s;
}

@keyframes animate-carousel-c-title {
  0% {
    opacity: 0;
    transform: translate(-3em, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes animate-carousel-c-subtitle {
  0% {
    opacity: 0;
   ...

JavaScript

$('.ql-links').on('mouseenter', function() {
  const frame = $(this).attr('data-frame');
  timer = setTimeout(function() {
    $('#products-carousel').carousel(Number(frame));
  }, 350)
}).mouseleave(function() {
  clearTimeout(timer);
});