JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="body" style="padding-top: 150px;"><div class="row">
    <div class="col-md-12">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                
                <div class="active item" data-slide-number="0">
                    <img src="http://placehold.it/130x130" class="img-fluid d-block">
                </div>
                <div class="item" data-slide-number="1"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="2"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="3"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="4"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="5"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="6"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="7"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="8"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="9"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="10"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="11"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="12"><img src="http://placehold.it/130x130" class="img-fluid d-block"></div><div class="item" data-slide-number="13"><img...

CSS

.selected img {
    opacity:0.5;
}

JavaScript

$('#myCarousel').carousel({
                	interval:   4000
            });
            $('[id^=carousel-selector-]').click( function(){
                var id_selector = $(this).attr("id");
                var id = id_selector.substr(id_selector.length -1);
                id = parseInt(id);
                $('#myCarousel').carousel(id);
                $('[id^=carousel-selector-]').removeClass('selected');
                $(this).addClass('selected');
            });

            $('#myCarousel').on('slid', function (e) {
                var id = $('.item.active').data('slide-number');
                id = parseInt(id);
                $('[id^=carousel-selector-]').removeClass('selected');
                $('[id=carousel-selector-'+id+']').addClass('selected');
            });