JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="row img-slider">
    <div class="col-md-10 col-md-offset-1">
        <div id="sticksCarousel" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#sticksCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#sticksCarousel" data-slide-to="1"></li>
                <li data-target="#sticksCarousel" data-slide-to="2"></li>
            </ol>
            <section class="carousel-inner">
                <div class="item active">
                    <img class="image1" src="img/slide1.png" alt="blah" style="width:100%;">
                </div>
                <div class="item">
                    <img class="image2" src="img/slide2.png" alt="blah" style="width:100%;">
                </div>
                <div class="item">
                    <img src="img/slide3.png" alt="blah" style="width:100%;">
                </div>
            </section>
            <!--carousel-inner-->
<a href="#sticksCarousel" class="left carousel-control" data-slide="prev"><span   class="glyphicon glyphicon-chevron-left"> </span></a>  <a href="#sticksCarousel" class="right    carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

        </div>
        <!--sticksCarousel-->
        <p id="sticksCarouselMessage">HEY!</p>
    </div>

JavaScript

$(document).ready(function () {
    $('.carousel').carousel({
        interval: 1000
    });
    
    var arrMessages = ["It worked for Image 1 class!", 
                       "It worked for Image 2 class!",
                       "It worked for Image 3 class!"]
    
    var $msg = $("#sticksCarouselMessage");
    $('#sticksCarousel').on('slid.bs.carousel', function () {

        var text = "", 
             $active = $('div.active'),
             index = $('div.item').index($active);
        
        $msg.text(arrMessages[index]);

    });
});