滑動滑塊 - 將滑動活動類應用到<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之間移除）。