光滑的滑块同步情况

Posted 2023-05-07

【中文标题】光滑的滑块同步情况

【英文标题】：Slick slider sync situation

【发布时间】：2015-10-01 16:12:59

【问题描述】：

我正在使用 slick 的“滑块同步”功能，如果 slidesToShow == 幻灯片总数，则导航中的 .slick-current 类在顶部轮播滑动时不移动.

这是html：

<div class="slider slider-for">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<div class="slider slider-nav">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
    <div><p>4</p></div>
</div>

下面是相关的js：

jQuery('.example2 .slider-for').slick(
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '.example2 .slider-nav'
); 
jQuery('.example2 .slider-nav').slick(
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.example2 .slider-for',
  centerMode: false,
  focusOnSelect: true
);

jsFiddle 演示问题在这里：http://jsfiddle.net/xd2h934n/

在这种情况下如何移动 .slick-current 类？

【参考方案1】：

我使用 slick 的内置 afterChange 事件来抓取迭代并手动将其应用于导航：

jQuery('.slider-for').on('afterChange', function(event, slick, direction)
    jQuery('.slider-nav .slick-active:eq('+slick.currentSlide+')').addClass('slick-current').siblings().removeClass('slick-current');
);

h/t @jiwebdev

【参考方案2】：

这在 GitHub 上一直被标记为已修复，但仍然不起作用。

这个JS应该这样做：

var slides = $(".slider-for .slick-track > .slick-slide").length;
$('.slider-for').on('afterChange', function(event, slick, currentSlide, nextSlide)
  var inFocus = $('.slider-for .slick-current').attr('data-slick-index');
  $('.slider-nav .slick-current').removeClass('slick-current');
  $('.slider-nav .slick-slide[data-slick-index="' + inFocus + '"]').addClass('slick-current');
);

【参考方案3】：

mike_freegan 的回答非常有帮助，但是，它没有解决导航滑块的进步（就实际推进幻灯片而言）。我通过在应该设为当前的导航元素上触发点击事件来调整他的答案，而不是仅仅对其应用必要的类（从而触发其他事件/回调）：

var slides = $(".slider-for .slick-track > .slick-slide").length;
$('.slider-for').on('afterChange', function(event, slick, currentSlide, nextSlide)
  var inFocus = $('.slider-for .slick-current').attr('data-slick-index');
  $('.slider-nav .slick-current').removeClass('slick-current');
  $('.slider-nav .slick-slide[data-slick-index="' + inFocus + '"]').trigger('click');
);