Carousel Fiddle

This is to add additional transition capability to Bootstrap 3 carousel

by Shawn Wood

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox" transition="bounce">

      <div class="item animated bounce active">
        <img src="https://c2.staticflickr.com/4/3649/5699001089_a1e7030be4_b.jpg" alt="Chania" width="1024" height="768">
        <div class="carousel-caption">
          <h3 class="animated">Carousel near Eiffel Tower</h3>
          <p class="animated">On the corner of the Pont d’Iéna and Quai Branly.</p>
        </div>
      </div>

      <div class="item animated bounce">
        <img src="https://c5.staticflickr.com/4/3416/3489962180_990d95e59a_b.jpg" alt="Carousel Columbia" width="1024" height="768">
        <div class="carousel-caption">
          <h3 class="animated">Carousel Columbia</h3>
          <p calss="animated">California's Great America's double decker carousel.</p>
        </div>
      </div>

      <div class="item animated bounce">
        <img src="https://c2.staticflickr.com/6/5091/5397812746_bfd50c8df3_b.jpg" alt="Flower" width="1024" height="768">
        <div class="carousel-caption">
          <h3 class="animated">Carousel, Honfleur, France</h3>
          <p class="animated">Honfleur is a town surrounding a beautiful little 17th-century harbor in Normandy.</p>
        </div>
     ...

CSS

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: 70%;
  margin: auto;
}

JavaScript

var currentTransition = $('.carousel-inner').attr('transition');
$('#switchTransition').on('click', function() {  
  var newTransition = $('#carouselTransition option:selected').val();
  $('.carousel-inner .item, .carousel-inner .item h3, .carousel-inner .item p').each(function(index, value) {
    var $item = $(this);
    $item.removeClass(currentTransition).addClass(newTransition);
  });
   currentTransition = newTransition;
});

$('#myCarousel').on('slide.bs.carousel', function() {
  //$('.carousel-inner .item.active').addClass(currentTransition);
});
$('#myCarousel').bind('slide.bs.carousel', function(e) {
  console.log('slide event!');
  
});

$('#myCarousel').bind('slid', function(e) {
  console.log("slid event!");
});

$('.carousel').carousel({
    interval: 5000
}).on('slide', function (e) {
    //$(this).find('.active').next().find('.slab').slabText();
		//$('.item.active').animateCss(currentTransition);
});
$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});