带有动画的光滑滑块答案

【问题标题】：slick slider with animations带有动画的光滑滑块
【发布时间】：2016-05-17 13:38:04
【问题描述】：

我在我的网站上使用 slick slider 和动画。一切都很好，除非我拖动幻灯片如果没有移动到下一张或上一张幻灯片我不想使用动画。

<div id="my_slider">
  <div id="item">
    <div id="name" class="hidden">slide1</div>
  </div>
  <div id="item">
    <div id="name" class="hidden">slide2</div>
  </div>
  <div id="item">
    <div id="name" class="hidden">slide3</div>
  </div>
</div>

这里是jsfiddle

【问题讨论】：

您是在谈论幻灯片文本上的缩放动画吗？ “幻灯片2”？

标签： twitter-bootstrap slider css-animations slick.js

【解决方案1】：

您将id 或name 用于多个项目，这是无效的。 ids 必须始终是唯一的。您可以分配一个通用类，而不是使用id 定位幻灯片名称，例如slide-name

为了使功能如您所愿，您必须使用一个名为setPosition 的附加事件，该事件在afterChange 事件之后运行。但是，在引入其他事件处理程序之前，您需要使用beforeChange 事件跟踪当前幻灯片，然后检查下一张幻灯片是否与afterChange 事件中的当前幻灯片匹配。如果当前幻灯片和下一张幻灯片匹配（未发生更改），则跳过动画。如果它们不匹配（发生了变化），则触发动画。

仅当当前幻灯片和下一张幻灯片不匹配（即活动幻灯片已更改）时，才使用afterChange 事件启动动画。使用变量来跟踪当前和下一张幻灯片，例如currSlide 和 nextSlide 分别。然后在setPosition事件中，可以通过比较currSlide和nextSlide来触发动画。

最后，我添加了一个辅助方法来将hidden 的class 应用于当前不可见的幻灯片名称。这可以防止文本过早出现并破坏动画。我在init 以及setPosition 事件中调用此方法。

更新的 HTML

<div id="my_slider">
  <div class="item">
    <div id="name1" class="slide-name hidden">slide1</div>
  </div>
  <div class="item">
    <div id="name2" class="slide-name hidden">slide2</div>
  </div>
  <div class="item">
    <div id="name3" class="slide-name hidden">slide3</div>
  </div>
</div>

jQuery

$('#my_slider').on('init', function(event, slick) {
  $('.slick-active .slide-name').removeClass('hidden');
  applyHiddenClass();
})

$('#my_slider').slick({
  arrows: false,
  speed: 900,
});

var currSlide = 0;
var nextSlide = 0;

function applyHiddenClass() {
  $.each($('.slick-slide'), function() {
    if ($(this).attr('aria-hidden') == 'true') {
      $(this).find('.slide-name').addClass('hidden');
    } else {
      $(this).find('.slide-name').removeClass('hidden');
    }
  });
}

$('#my_slider').on('afterChange', function(event, slick, currentSlide) {
  nextSlide = currentSlide;
  if (nextSlide !== currSlide) {
    $('.slick-active .slide-name').removeClass('animated zoomIn');
    $('.slick-active .slide-name').addClass('hidden');
  }
});

$('#my_slider').on('setPosition', function(event, slick, currentSlide) {
  if (nextSlide !== currSlide) {
    $('.slick-active .slide-name').removeClass('hidden');
    $('.slick-active .slide-name').addClass('animated zoomIn');
  }
  applyHiddenClass();
});

$('#my_slider').on('beforeChange', function(event, slick, currentSlide) {
  currSlide = currentSlide;
});

Fiddle Demo

如果您有任何问题，请提出。

【讨论】：

"ids 必须始终是唯一的"，但是您在包装器 div 上放置了一些复制的 ids。很好的解决方案。

【解决方案2】：

试试这个；将速度设置为零以禁用动画：

$('#my_slider').slick({
  arrows: false,
  speed: 0,
});

【讨论】：

我不想禁用动画。我只想在滑块移动到下一张或上一张幻灯片时使用它。