Bootstrap – Content Carousel

Simple Content Carousel using Bootstrap 4 and Bootstrap Icons

Checkout the Codepen DEMO.

Requirements:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js

HTML Code:

<div class="content-carousel-container">
  <div class="container">
    <div class="carousel slide" data-ride="carousel" id="carouselExampleControls">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="carousel-caption">
            <h3>Text 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat diam diam, nec lobortis magna porttitor eget. Nulla imperdiet aliquam eros, et porttitor leo congue sed.</p>
            <div class="uccs-pp-content-carousel-cta-button">
              <a href="#" target="_blank">CTA Button</a>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="carousel-caption">
            <h3>Text 2</h3>
            <p>Nunc fermentum odio velit, at ultricies neque pulvinar ut. Etiam at ornare mi. In luctus porta lorem. Suspendisse potenti.</p>
          </div>
        </div>
        <div class="carousel-item">
          <div class="carousel-caption">
            <h3>Text 3</h3>
            <p>Nam finibus, dui in sollicitudin interdum, purus velit pharetra erat, in auctor enim ipsum et felis. Sed nibh turpis, bibendum quis lacus ultrices, sollicitudin ultricies lacus.</p>
            <div class="uccs-pp-content-carousel-cta-button">
              <a href="#" target="_blank">CTA Button</a>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="carousel-caption">
            <h3>Text 4</h3>
            <p>Pellentesque lacus turpis, tempus sit amet tellus ac, laoreet rutrum nibh. Vivamus quis est metus.</p>
            <div class="uccs-pp-content-carousel-cta-button">
              <a href="#" target="_blank">CTA Button</a>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="carousel-caption">
            <h3>Text 5</h3>
            <p>Morbi tincidunt nunc ut ex scelerisque, at faucibus ex consectetur. Phasellus lorem sapien, vehicula sit amet condimentum nec, pulvinar vitae mauris. Duis quis commodo ipsum. Nam dictum leo eu ultrices laoreet. Maecenas venenatis vehicula purus, sed feugiat odio auctor dignissim.</p>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" data-slide="prev" href="#carouselExampleControls" role="button">
        <i class="bi bi-arrow-left-circle"></i>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" data-slide="next" href="#carouselExampleControls" role="button">
        <i class="bi bi-arrow-right-circle"></i>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

CSS Styles:

.content-carousel-container {
  background-color: #EAEAEA;
  padding-top: 2em;
  padding-bottom: 2em;
}
.carousel-inner {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}
.carousel-caption{
  position: unset;
  color: #4C4D4F;
}
.carousel-control-prev {
  color: black;
  justify-content: flex-start;
}
.carousel-control-prev:hover {
  color: grey;
}
.carousel-control-prev:visited, .carousel-control-prev:active, .carousel-control-prev:focus {
  color: #4C4D4F;
}
.carousel-control-next {
  color: black;
  justify-content: flex-end;
}
.carousel-control-next:hover {
  color: grey;
}
.carousel-control-next:visited, .carousel-control-next:active, .carousel-control-next:focus {
  color: #4C4D4F;
}
.carousel-control-prev, .carousel-control-next {
  font-size: 50px;
}
.uccs-pp-content-carousel-cta-button {
  text-align: center;
  max-width: 900px;
}
.uccs-pp-content-carousel-cta-button a {
  background: #CFB87B;
  padding: 0.5em 0.75em;
  font-size: 18px;
  color: black;
}
.uccs-pp-content-carousel-cta-button a:hover {
  color: #222;
  background: #E2CB8D;
  text-decoration: none;
}