jQuery Cycle：使用上一页和下一页自定义分页下一个按钮

发布于 2024-12-01 03:24:28 字数 1003 浏览 1 评论 0原文

我有一个幻灯片需要自定义分页标记，其中还包括上一页和下一页。下一个按钮。我正在使用 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”列表项视为分页器中的第一张幻灯片。如何偏移寻呼机以便忽略上一个和下一个项目？

预先感谢您的帮助！

原文

I have a slideshow that requires custom markup for the pagination, which also includes previous & next buttons. I'm using jQuery Cycle, but I'm having trouble working with both a custom pager and previous & next buttons.

This is what I want the end result of my pager to look like:

<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>

Here's what my jQuery Cycle code looks like:

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

The problem with this is that it treats the ".previous" list item as the first slide in the pager. How do I offset the pager so it ignores the previous and next items?

Thanks in advance for the help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

反差帅 2024-12-08 03:24:29

如果您想将它们用作上一个/下一个链接，则必须删除这些 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>

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

You have to take out those li's if you want to use them as prev/next links. You can then stylize the prev/next links using css and place them wherever you need. Try this

Markup

<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>

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

回复收藏 0 原文

~没有更多了~