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 Cycle 代码的样子：

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

问题在于它将“.previous”列表项视为分页器中的第一张幻灯片。如何偏移寻呼机，使其忽略上一个和下一个项目？

提前感谢您的帮助！

Answer 1

如果您想将它们用作上一个/下一个链接，则必须取出这些 li。然后，您可以使用 css 对上一个/下一个链接进行样式化，并将它们放置在您需要的任何地方。试试这个

标记

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