Slick Slider - 根据活动幻灯片将 slick 活动类应用于 <a>

Question

当幻灯片被拖动时，我试图将“slick active”类添加到 a 标签。该类在单击时应用，但无法弄清楚如何将其应用到另一个！

我们将不胜感激任何破译我的代码的帮助！

JS

$(document).ready(function() {

    var $slideshow = $(".slider").slick({
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        adaptiveHeight: true,
        swipeToSlide: true,
        touchThreshold: 3,
        arrows: false
    });

    $('.links').on('click', 'a', function( e ) {
        var slideIndex = $(this).closest('li').index();

        $slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );
        $('.links li a').removeClass('slick-current');
        $(this).addClass('slick-current');
        e.preventDefault();
    });


    $('.slider').on('afterChange', function(event,slick,i) {
        $('.links li a .slick-slide').removeClass('slick-current');
        $('.links li a .slick-slide').eq(i).addClass('slick-current');  
    });

    $('.links li a .slick-slide').eq(0).addClass('slick-current');  

});

HTML

 <div class="large-3 columns page-content-left">

      <ul class="links">
           <li><a href="#">slide1</a></li>
           <li><a href="#">slide2</a></li>
           <li><a href="#">slide3</a></li>

      </ul>

 </div>

<div id="" class="large-9 columns page-content-right">                             
   <section class="slider" id="slider1">

      <div class="slide">
      </div>
      <div class="slide">
      </div>
      <div class="slide">
      </div>

  </section>
</div>

Answer 1

您必须将类 slick-initialized 添加到 links。

我们没有您的 HTML，但它应该看起来像这样：

<div class="links slick-initialized">
  <li><a><span class="slick-slide">1</span></a></li>
  <li><a><span class="slick-slide">2</span></a></li>
  <li><a><span class="slick-slide">3</span></a></li>
</div>

更新

现在我们有了 HTML，很清楚为什么您仍然有问题。您使用$('.links li a .slick-slide') 设置类。这与我上面的代码相匹配，但是你有不同的结构。

      <ul class="links">
           <li><a href="#">slide1</a></li>
           <li><a href="#">slide2</a></li>
           <li><a href="#">slide3</a></li>
      </ul>

首先你得把它改成

  <ul class="links slick-initialized">
       <li><a href="#" class="slick-slide">slide1</a></li>
       <li><a href="#" class="slick-slide">slide2</a></li>
       <li><a href="#" class="slick-slide">slide3</a></li>
  </ul>

然后将 jquery 更改为 $('.links li a.slick-slide')（删除 a 和 .slick-slide 之间的空格）。