Caroufredsel分頁：不是數字，而是標題

Question

我使用Caroufredsel插件創建了傳送帶分頁。我想創建自定義唯一標題，而不是分頁中的默認數字。我希望每個標題都完全不同。目前，我設法使用「anchorBuild」添加aplphabetical標題（例如測試），但不是完全不同的標題。您的幫助將不勝感激！

$('#foo0').carouFredSel({ 
     auto: { duration: 600 }, 
     pagination: { 
     container:".menu", 
     anchorBuilder: function(nr) { return '<li><a href="#"><span>Test '+nr+'</span></a></li>';} 
     }, 
     mousewheel: true, 
     swipe: { onMouse: true }, 
    }); 

<ul class="menu"> 
    <li><a href="#environment">Environment</a></li> 
    <li><a href="#market">Marketplace</a></li> 
    <li><a href="#community">Community</a></li> 
    <li><a href="#workplace">Workplace</a></li> 
</ul> 

Answer 1

按照plugin's documentation（較老的文檔中找到here），你可以簡單地設置achorBuilder: false，然後用自定義標題中使用自己的HTML標記。

因此，像這樣爲你的HTML（注：我添加<span> s到匹配文檔）：

<ul class="menu"> 
    <li><a href="#Environment"><span>Environment</span></a></li> 
    <li><a href="#Marketplace"><span>Marketplace</span></a></li> 
    <li><a href="#Community"><span>Community</span></a></li> 
    <li><a href="#Workplace"><span>Workplace</span></a></li> 
</ul> 

然後你的jQuery：

$('#carousel').carouFredSel({ 
    auto: { 
     duration: 600 
    }, 
    pagination: { 
     container: ".menu", 
     anchorBuilder: false 
    }, 
    mousewheel: true, 
    swipe: { 
     onMouse: true 
    } 
}); 

下面是一個工作jsfiddle 。