如何将滑块添加到Nivo Slider插件的缩略图中？

Question

我已经搜索了相当长的一段时间，并试图把两个不同的插件一起做出这项工作，但似乎没有任何工作。

你们是否知道有任何好的链接可以将滑块添加到nivo滑块中的缩略图中，因此您一次只能查看5个缩略图，当您单击或放置在缩略图区域时，它会滑动以显示下一个5缩略图？

我试过JSCarousel和ThumbnailScroller到.nivo-controlNav标签，但没有任何一个运气。

任何帮助将不胜感激，谢谢！

Answer 1

看起来好像您可能需要设计自定义解决方案。我建议再次尝试使用JSCarousel，我曾经用它来解决这个问题，并取得了成功。否则，我不会写你的代码你，但伪代码会去像这样：

1. 列出所有缩略图，div标签是高度（有margin和padding）缩略图的内和一个自动宽度。用固定的宽度包围它。例如，如果您有90px的方形缩略图，并且您希望每个图标周围都有10px的填充，那么您的容器div高度为110px，如果要显示5个缩略图，则宽度为550px。最重要的是你的溢出必须设置为隐藏，所以不会显示其他缩略图。
2. 在两侧创建按钮。
3. 点击一个按钮，将您的缩略图的左边位置按住550px（或任何宽度）。
4. 有条件语句检查左边的位置是否大于宽度（达到右边界）或小于0（达到左边界）。

希望这会指出你在正确的方向！