JSFiddle - React, Tailwind, and code Playground

by Natcher86

HTML

<link rel="stylesheet" href="http://okonski.org/bootstrap-zindex/bootstrap.css">
        <div id="homeCarousel" class="carousel slide">
          <!-- Carousel items -->
          <div class="carousel-inner">
            <div class="active item">
              <img src="http://www.placekitten.com/1024/320" alt=""/>
              <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              </div>
            </div>
            <div class="item">
              <img src="http://www.placebear.com/1024/320" alt=""/>
              <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              </div>
            </div>
            <div class="item">
              <img src="http://www.placedog.com/1024/320" alt=""/>
              <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              </div>
            </div>
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control left" href="#homeCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#homeCarousel" data-slide="next">&rsaquo;</a>
        </div>

CSS

#homeCarousel {
    position: relative;
    z-index: 10;
}

JavaScript

$(document).ready(function(){

  var $homecarousel = $('#homeCarousel');


  $homecarousel.carousel({
    interval: 5000
  });

});