Bootstrap - Color changing carousel

by hantastic

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/animate.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container main-container">

  <div id="carousel-example-generic" class="carousel slide carousel-fade">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

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

      <!-- First slide -->
      <div class="item active" style="background-color:#72B1C8">
        <div class="carousel-caption">
          <h3 data-animation="animated fadeIn">
              This is the caption for slide 1
            </h3>
        </div>
      </div>
      <!-- /.item -->

      <!-- Second slide -->
      <div class="item" style="background-color:#E84683">
        <div class="carousel-caption">
          <h3 class="icon-container" data-animation="animated bounceInDown">
              <span class="glyphicon glyphicon-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>
      <!-- /.item -->

      <!-- Third slide -->
      <div class="item" style="background-color:#E28432">
        <div class="carousel-caption">
      ...

CSS

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}
 .main-container {
  padding: 10px 15px;
}

.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 {
  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:...

JavaScript

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

  //Initialize carousel 
  $myCarousel.carousel();

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

  //Pause carousel  
  $myCarousel.carousel('pause');


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