jQuery Cycle：上一個和下一個按鈕的自定義分頁

Question

我有一個幻燈片，需要分頁的自定義標記，其中還包括以前的&下一個按鈕。我正在使用jQuery Cycle，但我無法使用自定義尋呼機和之前的&下一個按鈕。

這就是我希望我的尋呼機的最終結果是這樣的：

<ul class="pager"> 
<li class="prev"><a href="#">Previous</a></li> 
<li class="one"><a href="#">1</a></li> 
<li class="two"><a href="#">2</a></li> 
<li class="three"><a href="#">3</a></li> 
<li class="four"><a href="#">4</a></li> 
<li class="next"><a href="#">Next</a></li> 
</ul> 

這裏是我的jQuery的循環代碼如下所示：

$(document).ready(function(){ 
$('.slides').cycle({ 
    prev: '.prev', 
    next: '.next', 
    pager: '.pager', 
    pagerAnchorBuilder: function(idx, slide) { 
     return '.pager li:eq(' + idx + ') a'; 
    } 
}); 
}); 

這裏的問題是，它對待「.previous」列表項作爲尋呼機中的第一張幻燈片。我如何抵消傳呼機，以便忽略上一個和下一個項目？

在此先感謝您的幫助！

Answer 1

如果您想將它們用作prev/next鏈接，您必須取出這些li。然後，您可以使用css設置prev/next鏈接的樣式，並將它們放在任何需要的位置。試試這個

標記

<ul class="pager"> 
<li class="prev"><a href="#">Previous</a></li> 
<li class="next"><a href="#">Next</a></li> 
</ul> 
<ul class="slides"> 
<li class="one"><a href="#">1</a></li> 
<li class="two"><a href="#">2</a></li> 
<li class="three"><a href="#">3</a></li> 
<li class="four"><a href="#">4</a></li> 
</ul> 

JS

$(document).ready(function(){ 
    $('.slides').cycle({ 
    prev: '.prev', 
    next: '.next', 
    pager: '.pager', 
    pagerAnchorBuilder: function(idx, slide) { 
     return '.pager li:eq(' + idx + ') a'; 
    } 
    }); 
});