Question

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!

Answer 1

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