Question

我有一个幻灯片，需要为分页添加自定义标记，其中还包括之前的＆amp;下一个按钮。我正在使用jQuery Cycle，但我无法使用自定义寻呼机和之前的＆amp;下一个按钮。

这就是我希望寻呼机的最终结果如下所示：

<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

如果您想将它们用作上一个/下一个链接，则必须取出它们。然后，您可以使用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'; 
    } 
  });
});

jQuery Cycle：自定义分页与Previous＆amp;下一个按钮

1 个答案: