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

Question

当幻灯片被拖动时，我试图在标签中添加‘’类。这个类是在单击时应用的，但无法解决如何将其应用于另一个类！

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

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之间删除空间)。