jQuery Cycle Plugin : Why the pager doesn't show the exact number of images in this official demo?

Question

I'm trying to use jQuery Cycle Plugin with pager (The jQuery Cycle Plugin is a slideshow plugin.)

Why the pager doesn't show the exact number of images in this official cycle demo :

http://jquery.malsup.com/cycle/pager11.html

If you look at the code, there are 8 images :

<div id="slideshow" class="pics" style="margin:auto;clear:left;margin-top:40px">
    <img src="malsup/cycle/beach1.jpg" />
    <img src="malsup/cycle/beach2.jpg" />
    <img src="malsup/cycle/beach3.jpg" />
    <img src="malsup/cycle/beach4.jpg" />
    <img src="malsup/cycle/beach5.jpg" />
    <img src="malsup/cycle/beach6.jpg" />
    <img src="malsup/cycle/beach7.jpg" />
    <img src="malsup/cycle/beach8.jpg" />
</div>

And the pager only shows 3 buttons. It should show 8 buttons ?

Edit: JavaScript code:

$(function() {

    $('#slideshow').cycle({
        fx:      'scrollHorz',
        timeout:  0,
        prev:    '#prev',
        next:    '#next',
        pager:   '#nav',
        pagerAnchorBuilder: pagerFactory
    });

    function pagerFactory(idx, slide) {
        var s = idx > 2 ? ' style="display:none"' : '';
        return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
    };
    
});

Answer 1

It doesn't show any anchors beyond the third because the pagerFactory() callback explicitly sets style='display:none;' on those anchors.

function pagerFactory(idx, slide) {
    // This line tests if the anchor's index is > 2
    // (beyond the 3rd anchor) and sets its display property to none
    var s = idx > 2 ? ' style="display:none"' : '';
    return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
};

And the effect this has on the DOM can be seen with the browser's inspector:

<ul id="nav">
  <li class="activeSlide"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li style="display:none"><a href="#">4</a></li>
  <li style="display:none"><a href="#">5</a></li>
  <li style="display:none"><a href="#">6</a></li>
  <li style="display:none"><a href="#">7</a></li>
  <li style="display:none"><a href="#">8</a></li>
</ul>

Now as to why the official demo does this? I have no idea - that's a question for the developer. It does illustrate how the pagerAnchorBuilder callback can be used to set different attributes on each pager anchor though, based on their indices.