如何在Nivo Slider插件中为缩略图添加滑块？

Question

我已经搜索了很长一段时间，并尝试将两个不同的插件组合在一起以完成这项工作，但似乎没有任何效果。

你们知道有任何好的链接可以在nivo滑块中为缩略图添加滑块，这样你一次只能查看5个缩略图，当你点击或离开缩略图区域时，它会滑动显示下5个缩略图？

我尝试将JSCarousel和ThumbnailScroller添加到.nivo-controlNav标签中，但两者都没有运气。

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

Answer 1

好像您可能需要设计自定义解决方案。我建议再次尝试使用JSCarousel，我过去曾使用它来获得同样的解决方案并且成功了。否则，我不会为你编写代码，但伪代码会是这样的：

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

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