jQuery Cycle - building a custom pager

Question

A relatively (I hope) simple jQuery question:

I have a menu:

<ul id="menu" style="list-style:none">
    <li><a href="#asics">ASICS</a></li>
    <li>/</li>
    <li><a href="#plants">PLANTS PLUS</a></li>
    <li>/</li>
    <li><a href="#tooheys">TOOHEYS</a></li>
    <li>/</li>
    <li><a href="#olympics">OLYMPICS</a></li>
    <li>/</li>
    <li><a href="#panadol">PANADOL</a></li>
    <li>/</li>
    <li><a href="#kia">KIA CADENZA</a></li>
</ul>

The menu is controlling a slider (code not necessary, just standard cycle divs. Here is the code, taken from the jQuery Cycle Plugin Pager Tutorial:

var slider = new Swipe(document.getElementById('slider'));
$('#adSlideshow').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0,  
    pager:  '#menu',
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#menu li:eq(' + idx + ') a'; 
    }
});

As you can see, in my menu every second link (the ones with the tags) is relevant for the pager; every <li>/</li> item is just a spacer between each link item. How can I edit the pager code so that it only uses the correct <li> items?

Here's a jsFiddle of it to better illustrate what I mean: http://jsfiddle.net/y4Qfw/12/ <-- As you can see, the links are calling every 2nd div. At the moment I'm just putting dummy divs in every second position so that the code works fine, but I'd rather find a less bulky solution. Thoughts?

Answer 1

Dont use <li>/</li> for spacing .. use another element or even better remove them and use the following CSS rule :

#menu li {
    margin-bottom: 30px;
}

Example : http://jsfiddle.net/y4Qfw/13/

Use the elements for what they are meant for