具有複雜導航功能的圖像滑塊

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; 
}