向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>