JSFiddle - React, Tailwind, and code Playground

by atif_kht

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-sm-6">
        <h1>Recent News</h1>
            <p id="CarouselMessage">Hello World</p>     
        </div><!-- Column 6 -->
        <div class="col-sm-6"> 
        <div id="Carousel2" class="carousel slide" data-ride="carousel">             
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#Carousel2" data-slide-to="0" class="active"></li>
                <li data-target="#Carousel2" data-slide-to="1"></li>
                <li data-target="#Carousel2" data-slide-to="2"></li>
                <li data-target="#Carousel2" data-slide-to="3"></li>
              </ol>
              <!-- Wrapper for slides -->
              <div class="carousel-inner" id="newscarousel" role="listbox">
                    <div class="item active">
                      <img src="http://p-fst2.pixstatic.com/54b70166dbfa3f75c40019d9._w.60_h.60_s.centercrop_.jpg" alt="Chania">
                    </div>

                    <div class="item">
                      <img src="http://p-fst2.pixstatic.com/56b4de412a099a4d57000594._w.60_h.60_s.centercrop_.jpg" alt="Chania">
                    </div>

                    <div class="item">
                      <img src="http://p-fst1.pixstatic.com/53e4db60dbfa3f306300abcd._w.60_h.60_s.centercrop_.jpg" alt="Flower">
                    </div>

                </div><!-- Carousel inner -->
          </div><!-- CAROUSEL 2 -->            
        </div><!-- Column 6 -->

JavaScript

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

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

    });
});