Question

我想创建一个全宽度滑块（固定高度），当幻灯片内容（透明PNG）滑入时，背景颜色会逐渐消失。

我正在考虑修改Owl Carousel来做这件事，但很高兴使用能够在颜色和幻灯片之间平滑过渡的任何东西。

任何帮助都会受到大力赞赏

Answer 1

再次感谢您的帮助。我设法搞清楚了。如果有人想知道，你可以在这里看到......

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

背景颜色在转盘退色

1 个答案: