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 ".previ开发者_如何学Goous" 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!

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