JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- HTML Markup -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://source.unsplash.com/random/1600x900" alt="Image 1">
      <div class="carousel-caption">
        <h3>Image 1</h3>
        <p>Caption for image 1</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/1600x900" alt="Image 2">
      <div class="carousel-caption">
        <h3>Image 2</h3>
        <p>Caption for image 2</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/1600x900" alt="Image 3">
      <div class="carousel-caption">
        <h3>Image 3</h3>
        <p>Caption for image 3</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS

/* CSS Styles */
.carousel-item {
  height: 65vh; /* Adjust this value to change the height of the carousel */
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

JavaScript

$(document).ready(function() {
  $('#myCarousel').carousel();
});