Question

我正在使用光滑的“滑块同步”功能，如果slideToShow ==幻灯片的总数，当顶部轮播滑动时，导航中的.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类？

Answer 1

这在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');
});

Answer 2

mike_freegan 的答案非常有用，但是，它没有解决导航滑块的进展（实际上推进了幻灯片）。我通过在nav元素上触发应该变为当前的click事件来调整他的答案，而不是仅仅向其应用必需的类（从而触发其他事件/回调）：

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');
});

Answer 3

我使用了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

光滑的滑块同步情况

3 个答案: