具有复杂导航功能的图像滑块

Question

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

这似乎并没有工作代码：

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

我需要做的，是设定在一个活动类：

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

上的jsfiddle完整的示例颜色指示器盒以及与活动幻灯片关联的颜色选择器框上。 JS脚本在导航缩略图上工作正常，但似乎不支持将活动类添加到多个元素，或者我以错误的方式执行此操作。用于设置活动类的JS脚本位于JS小提琴JS窗口的末尾。

任何人都可以帮助我吗？

谢谢！

Laurent

Answer 1

我想这就是你要找的东西？

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

所做的更改：

首先 - 因为同样的选择器可用于所有3所列出容易，我停止使用.EQ和使用.filter与第n个孩子选择 - 这让选择来自所有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; 
}