Question

我正在使用Slick JS carousel，它运行正常。我有外部导航设置来控制它。我想有一个活跃的＆＃39;类添加到外部导航中的<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");
});

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

1 个答案: