Animate a bootstrap carousel

disjfa

Follow

Feb 23, 2017 · 2 min read

If you don’t like to read but see the a working example you can just check it out here. Otherwise, enjoy the read and check it out anyway after the read.

Ok, so we have a default bootstrap carousel. We want to add some fancy animations on one. What do we know from the docs.

• A carousel slides.
• A carousel slides for 5 seconds, default of course.
• We can add everything we want in it.

Animate with css, because we can!

Next, a thing i like to use is a responsive embed so we can create a inner item using a fixed ratio, as example a 16 x 9 ratio. And we add a background image so we have a fancy item.

<div class="carousel-item">
    <div class="embed-responsive embed-responsive-16by9">
        <div class="embed-responsive-item" style="background-image: url(....);">
            ... inner content
        </div>
    </div>
</div>

Next, we add some inner content.

<h3>....</h3>
<div class="row py-3">
    <div class="col-2"></div>
    <div class="col-4">
        <a href="#" class="btn btn-primary btn-block">
            <i class="fa fa-puzzle-piece"></i>
            Button 1
        </a>
    </div>
    <div class="col-4">
        <a href="#" class="btn btn-info btn-block">
            <i class="fa fa-paper-plane"></i>
            Button 2
        </a>
    </div>
    <div class="col-2"></div>
</div>

And we repeat this a couple of times to create a carousel and let it slide. Next we create a couple of animations like this.

@keyframes animate-carousel-title {
  0% {
    transform: translate(0, -2em);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

And again, rince repeat a couple of times to add them on the h3 and buttons. We also need to add a animation-delay per item, so they will animate one after the other. We set the animation on the .carousel-item.active class so they will be triggered when bootstrap adds the .active class after the carousel stops sliding.

.carousel-item.active h3 {
  animation: animate-carousel-title 1s normal forwards;
}

.carousel-item.active .btn-primary {
  animation: animate-carousel-btn-primary 1s normal forwards;
  animation-delay: 1s;
}

...

And done. Now we have a bootstrap carousel with an animation on every slide. Cool for every day use, and if you want some more, add more animations. Feel free to make it awesome.

You can check out the working example here.