JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>




<div class="row">

<div class="col-1">
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
</div>

<div class="col-10">
    <div id="carouselExampleControls" class="carousel slide" data-interval="false" data-bs-ride="carousel">

      <div class="carousel-inner">

        <div class="carousel-item col-md-4 active">
          <div class="card">
            <input style="display:none;" type="radio" id="prod1" checked name="prod">
            <label for="prod1">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;">
            </label>
          </div>
        </div>

        <div class="carousel-item col-md-4">
          <div class="card">
            <input style="display:none;" type="radio" id="prod2" name="prod">
            <label for="prod2">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;">
            </label>
          </div>
        </div>

        <div class="carousel-item col-md-4">
          <div class="card">
            <input style="display:none;" type="radio" id="prod3" name="prod">
            <label for="prod3">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;">
            </label>
          </div>
        </div>

        <div class="carousel-item col-md-4">
          <div class="card">
            <input...

CSS

@media (min-width: 768px) {
    /* show 4 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item{
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
   ...

JavaScript

var carouselExampleControls = document.querySelector('#carouselExampleControls')
var carousel = new bootstrap.Carousel(carouselExampleControls, {
  interval: 0,
  wrap: false
});