jQuery Extension To Add Ken Burns Effect To Bootstrap Carousel

A jQuery / CSS3 extension for Bootstrap that applies a fancy CSS3 based Ken Burns effect to your Bootstrap carousel component.

How to use it:

1. Load the core stylesheet ken-burns.css in your document's head section.

<link rel="stylesheet" href="css/ken-burns.css">

2. Load the Font Awesome 4 for the navigation icons.

<link rel="stylesheet" href="font-awesome.min.css">

3. Load the Animate.css to animate image captions.

<link rel="stylesheet" href="animate.min.css">

4. Create a Bootstrap carousel component with several additional html markups and CSS classes as follow:

<div id="kb" class="carousel kb_elastic animate_text kb_wrapper" 
   data-ride="carousel" 
   data-interval="6000" 
   data-pause="hover">

  <!--======= Wrapper for Slides =======-->
  <div class="carousel-inner" role="listbox">

    <!--========= First Slide =========-->
  <div class="item active">
      <img src="1.jpg" alt="slider 01" />
      <div class="carousel-caption kb_caption">
        <h1 data-animation="animated flipInX">Caption</h1>
        <h2 data-animation="animated flipInX">More Description</h2>
      </div>
    </div>

    <!--========= Second Slide =========-->
    <div class="item">
      <img src="2.jpg" alt="slider 02">
      <div class="carousel-caption kb_caption kb_caption_right">
        <h1 data-animation="animated flipInX">Caption</h1>
        <h2 data-animation="animated flipInX">More Description</h2>
      </div>
    </div>

    <!--========= Third Slide =========-->
    <div class="item">
      <img src="3.jpg" alt="slider 03" />
      <div class="carousel-caption kb_caption kb_caption_center">
        <h1 data-animation="animated flipInX">Caption</h1>
        <h2 data-animation="animated flipInX">More Description</h2>
      </div>
    </div>

  </div>

  <!--======= Navigation Buttons =========-->

  <!--======= Left Button =========-->
  <a class="left carousel-control kb_control_left" href="#kb" role="button" data-slide="prev">
    <span class="fa fa-angle-left kb_icons" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>

  <!--======= Right Button =========-->
  <a class="right carousel-control kb_control_right" href="#kb" role="button" data-slide="next">
    <span class="fa fa-angle-right kb_icons" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

5. Make sure you've loaded jQuery library in your Bootstrap project.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

6. The jQuery script to animate image captions.

$(function ($) {

  "use strict";

  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 $immortalCarousel = $('.animate_text'),
      $firstAnimatingElems = $immortalCarousel.find('.item:first').find("[data-animation ^= 'animated']");

  // Initialize carousel
  $immortalCarousel.carousel();

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

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

})(jQuery);

---

This awesome jQuery plugin is developed by filippovjegor. For more Advanced Usages, please check the demo page or visit the official website.