带动画的光滑滑块

Question

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

<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

Answer 1

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

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

Answer 2

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

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

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

最后，我添加了一个辅助方法，用于将 class 或 hidden 应用于当前不可见的幻灯片名称。这可以防止文本过早出现并破坏动画。我在 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

如有任何问题，欢迎提问。

带动画的光滑滑块

slick slider with animations

slider

css-animations

twitter-bootstrap

slick.js