Question

我使用slick.js进行多个滑块的长滚动。每个滑块使用slickGoTo方法作为导航，响应其上方链接设置的点击事件。

我想在每张幻灯片更改后的链接中添加一个活动类，无论是通过滑动还是单击光滑的上一个/下一个箭头。我已经让它在页面上的第一个滑块上工作，但它不适用于后续的滑块。

简单的修复方法是滑块同步，但是当the slick documentation中显示滑块同步的方式中有多个相同的滑块类时，我无法使其工作。

HTML

<div class="leak-slider">
    <div class="slider-dots">
        <a class="link pulse active">link 1 </a>
    </div> <!-- /.slider-dots -->
    <div class="slider-dots">
        <a class="link pulse active">link 2 </a>
    </div> <!-- /.slider-dots -->
    <div class="slider-dots">
        <a class="link pulse active">link 3 </a>
    </div> <!-- /.slider-dots -->
</div>

<div class="expanded-slider">
    <div class="expanded-content">
        <h3 class="expanded-title">Title of each slide</h3>

        <p>content</p>
    </div>  <!-- /.expanded-content -->

    <div class="expanded-content">
        <h3 class="expanded-title">Title of each slide</h3>

        <p>content</p>
    </div>  <!-- /.expanded-content -->

    <div class="expanded-content">
        <h3 class="expanded-title">Title of each slide</h3>

        <p>content</p>
    </div>  <!-- /.expanded-content -->
</div> <!-- /.expanded-slider -->

以上标记包含在页面每个部分的容器中

的jQuery

  var $expandedSlider = $('.expanded-slider').slick({
    arrows: true,
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1
  });

  $('.slider-dots').on('click', function(){
    var slideIndex = $(this).index(),
      dot = $(this),
      dotLink = dot.children('.link'),
      currentSlide = $expandedSlider.slick('slickCurrentSlide');

    // toggle active class on click of dots
    dotLink.addClass('active');
    dot.siblings().children('.link').removeClass('active');

    //Navigate to Slide
    $expandedSlider.slick('slickGoTo', parseInt( slideIndex ));
  });

  // toggle active class on change of slide
  $expandedSlider.on('afterChange', function(event, slick, direction){
    var slider = $(this),
      currentSlide = slider.slick('slickCurrentSlide'),
      dot = $('.slider-dots').eq(currentSlide),
      dotLink = dot.children('.link');

    dotLink.addClass('active');
    dot.siblings().children('.link').removeClass('active');
  });

Answer 1

结论是，slick afterchange方法监听初始化类中的所有更改事件。因此，如果多个滑块使用相同的类，则不可能仅在该滑块上发生更改事件..

Slick.js重复多个滑块的事件

1 个答案: