更新

Question

Im trying to add 'slick active' class to an a tag when the slide has been dragged. The class is applied on click but cant work out how to apply it to the other!

Any help deciphering my code would be much appreciated!

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之间删除的空格）。

Slick Slider - 将光滑的活动课程应用于<a> according to active slide

1 个答案:

更新