Background colour fade on carousel

Question

I would like to create a full width slider (fixed height) where the background color fades as the slide content (a transparent PNG) slides in.

I was looking at possibly modifying Owl Carousel to do this but happy to use anything that offers a smooth transition between the colors and slides.

Any help would be massively appreciated

Answer 1

Thanks again for your help. I managed to figure it out. In case anybody else would like to know, you can see here...

http://jsfiddle.net/hantastic/qtxgnx73/

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