Search code examples
jquerypaginationcyclepager

jQuery Cycle: Custom Pagination with Previous & Next Buttons

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!

Solution

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

    JS

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