将缩略图添加到 ResponsiveSlides.js

【问题标题】：Add thumbnails to ResponsiveSlide.js将缩略图添加到 ResponsiveSlides.js
【发布时间】：2013-09-11 11:08:22
【问题描述】：

我正在尝试使用 ResponsiveSlide.js 创建自定义缩略图库，但似乎无法弄清楚如何触发单个幻灯片。我不确定是否可以通过更改 CSS 或是否需要使用 JS 来调用它。我对 jQuery 也很陌生，所以这无济于事。

到目前为止，我有一个工作幻灯片和缩略图链接，但是当我点击它们时我无法触发幻灯片更改。

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

slider1_s2 是我在本例中尝试调用的幻灯片的 ID 标签，但它可以是任何幻灯片。

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：