将缩略图添加到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>