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?

score 1 · Accepted Answer · answered Jan 07 '12 at 09:32

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

answered Jan 07 '12 at 09:32

Manse

37,765
10
83
108

Cheers. I should have been more specific; for the usage in question the spacers are there in a horizontal menu and I want them to float evenly between each `
` item even when the page is resized. [Here is the question from this morning](http://stackoverflow.com/questions/8767211/horizontal-menu-that-resizes-nicely) and [here is the site it's being implemented on](http://harrisonfjord.com/folio/). If you can suggest a better way to do it it would be greatly appreciated.

JVG

Jan 07 '12 at 09:41

1

I have suggested a better way - dont use `

` to implement spacers if its going to impact on your slider - try replacing the `

/

` with a `` and see what impact that has on the slider - if it does you could style the `` in the same way as the `

/

` – Manse Jan 07 '12 at 09:46

jQuery Cycle - building a custom pager

1 Answers1