使用 Slick 轮播，如何将类添加到外部导航？

Question

我正在使用 Slick JS 轮播，它工作正常。我设置了外部导航来控制它。我想在外部导航中的<a> 中添加一个“活动”类。将根据活动和/或单击的幻灯片添加和删除该类。

HTML 代码：

<div id="slider">
                <div class="responsive">
                    <h3>Responsive</h3>
                </div>
                <div class="resourceful">
                    <h3>Resourceful</h3>
                </div>
                <div class="remarkable">
                    <h3>Remarkable</h3>
                </div>
                <div class="resilient">
                    <h3>Resilient</h3>
                </div>
                <div class="relationships">
                    <h3>Relationships</h3>
                </div>

</div>
<div id="externalNav">
      <ul>
         <li><a href="javascript:void(0)">Responsive</a></li>
          <li><a href="javascript:void(0)">Resourceful</a></li>
          <li><a href="javascript:void(0)">Remarkable</a></li>
          <li><a href="javascript:void(0)">Resilient</a></li>
          <li><a href="javascript:void(0)">Relationships</a></li>
       </ul>
</div>

还有JS代码：

$('#slider').slick({
autoplay: true,
autoplaySpeed: 7000,
arrows: false
});

$("#externalNav li a").click(function(e){
  $(this).addClass("active");
  var slideIndex = $(this).parent().index();
  $( "#slider" ).slick('slickGoTo', parseInt(slideIndex));
});

目前，已添加活动类。但是当我单击外部导航中的另一个项目时，它并没有被删除。 $(this).addClass("active"); 在这里不是正确的解决方案，但我不确定还有什么可行的方法。

Answer 1

假设幻灯片的索引与导航匹配，您可以尝试使用平滑的 afterChange 事件：

$("#externalNav li a").click(function(a) {
    var e = $(this).parent().index();
    $("#slider").slick("slickGoTo", parseInt(e));
});

$("#slider").on("afterChange", function(a, e, i, l) {
    $("#externalNav li a").removeClass("active");
    $("#externalNav li:eq(" + i + ") a").addClass("active");
});