Spicing Up the Bootstrap Carousel with CSS3 Animations

Sources and Credits:
Author: Codeceil
bootstrap 4.1.1
font-awesome4.7.0
Last update: April 15, 2021

<div class="container">
  <div class="row">
    <div class="col">

      
      <div id="carouselExampleIndicators" class="carousel slide">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner skyblue">

          
          <div class="carousel-item active skyblue">
            <div class="carousel-caption d-md-block">
              <h3 data-animation="animated bounceInLeft">
                This is the caption for slide 1
              </h3>
              <h3 data-animation="animated bounceInRight">
                This is the caption for slide 1
              </h3>
              <button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
            </div>
          </div>

          
          <div class="carousel-item skyblue">
            <div class="carousel-caption d-md-block">
              <h3 class="icon-container" data-animation="animated bounceInDown">
                <span class="fa fa-heart"></span>
              </h3>
              <h3 data-animation="animated bounceInUp">
                This is the caption for slide 2
              </h3>
              <button class="btn btn-primary btn-lg" data-animation="animated zoomInRight">Button</button>
            </div>
          </div>

          
          <div class="carousel-item skyblue">
            <div class="carousel-caption d-md-block">
              <h3 class="icon-container" data-animation="animated zoomInLeft">
                <span class="fa fa-glass"></span>
              </h3>
              <h3 data-animation="animated flipInX">
                This is the caption for slide 3
              </h3>
              <button class="btn btn-primary btn-lg" data-animation="animated lightSpeedIn">Button</button>
            </div>
          </div>
        </div>

        
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
      </div>

    </div>
  </div>
</div>
<p class="p">Demo by Antonietta Perna. <a href="http://www.sitepoint.com/bootstrap-carousel-with-css3-animations" target="_blank">See article</a>.</p>

.container {
  padding: 10px 15px;
}
.skyblue {
  background-color: #22c8ff;
}

.carousel-indicators {
  bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
  background-image: none;
}
.carousel-item {
  min-height: 350px; 
  height: 100%;
  width:100%; 
}
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button {
  background-color: #09c;
}
.carousel-caption h3 {
  padding: .5em;
}
.carousel .icon-container {
  display: inline-block;
  font-size: 25px;
  line-height: 25px;
  padding: 1em;
  text-align: center;
  border-radius: 50%;
}
.carousel-caption button {
  border-color: #00bfff;
  margin-top: 1em; 
}

/* Animation delays */
.carousel-caption h3:first-child {
  animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
  animation-delay: 2s;
}
.carousel-caption button {
  animation-delay: 3s;
}

h1 {
  text-align: center;  
  margin-bottom: 30px;
  font-size: 30px;
  font-weight: bold;
}

.p {
  padding-top: 125px;
  text-align: center;
}

.p a {
  text-decoration: underline;
}
Resources

/* Demo Scripts for Bootstrap Carousel and Animate.css article
* on SitePoint by Maria Antonietta Perna
*/
(function($) {
  //Function to animate slider captions
  function doAnimations(elems) {
    //Cache the animationend event in a variable
    var animEndEv = "webkitAnimationEnd animationend";

    elems.each(function() {
      var $this = $(this),
        $animationType = $this.data("animation");
      $this.addClass($animationType).one(animEndEv, function() {
        $this.removeClass($animationType);
      });
    });
  }

  //Variables on page load
  var $myCarousel = $("#carouselExampleIndicators"),
    $firstAnimatingElems = $myCarousel
      .find(".carousel-item:first")
      .find("[data-animation ^= 'animated']");

  //Initialize carousel
  $myCarousel.carousel();

  //Animate captions in first slide on page load
  doAnimations($firstAnimatingElems);

  //Other slides to be animated on carousel slide event
  $myCarousel.on("slide.bs.carousel", function(e) {
    var $animatingElems = $(e.relatedTarget).find(
      "[data-animation ^= 'animated']"
    );
    doAnimations($animatingElems);
  });
})(jQuery);

Share snippt :

Related More Snippets

Bootstrap 4 Slider