jQuery 循环 : Custom Pagination with Previous & Next Buttons

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