將縮略圖添加到ResponsiveSlide.js

Question

我試圖使用ResponsiveSlide.js創建自定義縮略圖庫，但似乎無法弄清楚如何觸發單個幻燈片。我不確定是否可以使用CSS更改或需要使用JS來調用它。我對jQuery也很新，所以沒有任何幫助。

我到目前爲止所做的工作幻燈片和縮略圖鏈接，但當點擊它們時我無法觸發幻燈片更改。

<a onClick="$('#slider1_s2').addClass(activeClass)" href="#">thumb image</a> 

slider1_s2是我在本例中嘗試調用的幻燈片的ID標記，但它可以是任何幻燈片。

Answer 1

讓插件爲您做好工作。如果您想要一組縮略圖鏈接到幻燈片中的相關圖像，則需要自己製作。

$("#slider3").responsiveSlides({ 
    manualControls: '#unique-pager' 
}); 

有要鏈接的幻燈片圖像圖像在#unique-pager你將創建。

這是從Viljamis的演示代碼

<!-- slideshow --> 
<ul class="slides" id="slider"> 
    <li><img src="images/1.jpg" alt=""></li> 
    <li><img src="images/2.jpg" alt=""></li> 
    <li><img src="images/3.jpg" alt=""></li> 
</ul> 

<!-- Pager --> 
<ul id="unique-pager"> <!--this id gets inserted in manualControls --> 
    <li><a href="#"><img src="images/1_thumb.jpg" alt=""></a></li> 
    <li><a href="#"><img src="images/2_thumb.jpg" alt=""></a></li> 
    <li><a href="#"><img src="images/3_thumb.jpg" alt=""></a></li> 
</ul>