0

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

Hantastic
  • 3
  • 3
  • Welcome to SO. Please read this first : [http://stackoverflow.com/help/how-to-ask](http://stackoverflow.com/help/how-to-ask) and add your efforts in question description. – tejashsoni111 Oct 24 '16 at 11:56
  • Possible duplicate of [CSS3 Fade Effect](http://stackoverflow.com/questions/3079330/css3-fade-effect) – vaso123 Oct 24 '16 at 11:57
  • Thanks for taking the time to look at this issue. It's not the same as the CSS3 Fade effect. I have tried adding a data attribute to each carousel item containing the hex code of the background color but have had problems retrieving this hex. – Hantastic Oct 24 '16 at 12:03

1 Answers1

0

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);
Hantastic
  • 3
  • 3