JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<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-8 offset-md-2">

            <!--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>
                             ...

CSS

body {
            background-color: #ccc;
        }

        .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, 'right', 25, 100, 10);
            });

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

            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);
            }
        });