Question

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

<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

您使用的id name用于多个项目，这些项目无效。 id必须始终是唯一的。您可以指定一个公共类，而不是使用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

如果您有任何疑问，请询问。

Answer 2

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

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

带有动画的光滑滑块

2 个答案: