具有复杂导航的图像滑块

Question

我需要创建一个具有一些复杂导航功能的滑块。

这是似乎不起作用的代码：

$('#bulletLooper').on('shown', function (e) {
 $('.looper-nav > li', this)
   .removeClass('active')
   .eq(e.relatedIndex)
   .addClass('active');
});

关于 jsfiddle 的完整示例：

http://jsfiddle.net/Laurent514/N3Wgp/17/

我在这里需要做的是在颜色指示器框和与活动幻灯片关联的颜色选择器框上设置一个活动类。JS脚本在导航缩略图上工作正常，但似乎不支持将活动类添加到多个元素，或者我这样做的方式错误。用于设置活动类的 JS 脚本位于 JS 小提琴 JS 窗口的末尾。

谁能帮我？

谢谢！

劳伦

Answer 1

我想这就是你要找的？

http://jsfiddle.net/N3Wgp/18/

所做的更改：

首先 - 由于相同的选择器可以轻松地用于所有 3 个列表，我停止使用 .eq 并使用带有第 n 个子选择器的 .filter - 这允许从所有 3 个 .looper-nav 列表中选择 li 元素以赋予它们活动类，并且也停止将选择器的范围限定为 .looper.slide 对象 - 所有这些都是通过对底部的 JS 进行一些小的更改来完成的。

$('#bulletLooper').on('shown', function (e) {
    $('.looper-nav > li')
        .removeClass('active')
        .filter(':nth-child('+(e.relatedIndex+1)+')')
        .addClass('active');
});

第二 - 一些小的 CSS 规则来应用颜色指示器的显示更改，现在它有可用的活动类。只需将其添加到CSS的末尾即可。

.color-indicator .looper-nav > li {
    display: none;
}
.color-indicator .looper-nav > li.active {
    display: inline-block;
}