Blog
Select Page

Advanced Bootstrap 4 carousel with animating slide contents

Misc

advanced bootstrap carousel
advanced bootstrap carousel

Sliders and carousels are used everywhere nowadays in a website weather it is hero section, sidebars or any landing page. Meaningful animations makes sliders and carousels more engaging and eye catching drawing attention of users to the content within.

So here is an example of Bootstrap 4 carousel + CSS animation using Animate.css to create various animations for elements in slides.

DEMO

Open demo in a new window – https://demos.webdevpuneet.com/bootstrap/bootstrap-4/advanced-bootstrap-4-carousel/index.html

HTML

<!doctype html>
<!-- Created by webdevpuneet.com -->
<html lang="en">
  <head>
    <title>Advanced Bootstrap-4 Carousel</title>

    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="INDEX,FOLLOW"/>
    <meta name="keywords" content="" />
    <meta name="description" content="Advanced Bootstrap-4 carousel with added features"/>
    <meta name="author" content="webdevpuneet.com" />
    <meta name="copyright" content="webdevpuneet.com" />

    <!-- Bootstrap CSS from CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
    <link rel="stylesheet" href="./assets/css/style.css" >
  </head>
  <body>
    <h1>Advanced Bootstrap-4 Carousel</h1>

    <div class="container">

          <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">

              <!-- first slide -->
              <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>

              <!-- second slide -->
              <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>

              <!-- third slide -->
              <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>

            <!-- controls -->
            <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>

    <!-- Required JavaScript from CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="./assets/js/scripts.js"></script>
  </body>
</html>

CSS

/* Created by webdevpuneet.com */

body{
  padding: 50px 0;
}
.container{

}

.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;
}

JavaScript, jQuery

// Created by webdevpuneet.com

(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);