Split jQuery cycle pager into divs

I have a jQuery cycle slider working fine, but the pager I need split into different places. The paging itself works, but the active slide is the same for each div - i.e. for the first slide, the first pager in each div will show as active. I'm having a hard figuring out how to solve this problem!

An example of what I'm trying to achieve is the paging of this site http://www.cote-carmes.com/en-en/rooms.php.

The idea of the markup is as follows:

<div id="home-content">
<div class="home-sub first">
   <ul class="slide-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
</div>

<div class="home-sub">
   <ul class="slide-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
</div>

<div class="home-sub">
   <ul class="slide-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
</div>
</div>

And the jQuery I have as follows:

$('#home-slider').cycle({
        pager:  '#home-content ul', 
        pagerAnchorBuilder: function(idx, slide) { 
            // return selector string for existing anchor 
            return '#home-content li:eq(' + idx + ') a'; 
        }

    });

Please help!

Solution

Chris,

I think I cracked it.

See this demo based on jquery.malsup.com/cycle/pager3.html.

This is what I did:

Split the pager ul into two separate uls
Modified the pagerAnchorBuilder option in the .cycle() call as below to make only the first link in each ul an active pager.
Added some css to give the anchor borders in the two uls different colors (just to indicate the different uls) and to give the active pager links a mouseover effect.

Javascript:

$('#slideshow').cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
        var selector = '#nav li:eq(' + (idx) + ')';//li selector
        var $li = $(selector).filter(function() {
            return $(this).index() == 0;//accept only the first li in its ul
        });
        if( $li.length > 0 ) {
            $li.find('a').addClass('pager');
            return selector + ' a';//anchor selector
        }
    }
});

This may not be exactly what you want but it should give you a way ahead.

EDIT

Starting with your fiddle, I ended up with this :

$('#home-slider').cycle({
    pager: '#home-content',
    pagerAnchorBuilder: function(idx, slide) {
        return '#home-content li:eq(' + idx + ') a';
    },
    updateActivePagerLink: function(containerID, idx, cl) {
        $lis = $('#home-content li').removeClass(cl).eq(idx).addClass(cl);
    }
});

NOTES :

In the HTML, <div class="home-sub"> wrappers removed - unnecessary.
cycle pager option changed from pager: '#home-content ul' to pager: '#home-content'
cycle updateActivePagerLink option added - to give a custom highlight effect

DEMO