Multiple malsup cycle slideshows controlled by 1 pager, startingSlide staying in sync

Ok guys, I'm back with another complicated question. I have a big slideshow composed of 3 separate Malsup Cycle slideshows. The current slide is in front and the other 2 are behind it, the left one with the starting slide -1 of the current one and the right one with starting slide +1. This works. When I click #next it triggers all three, which is great. Problem is I need to implement a pager and the pager only controls the central slideshow and not the other 2.

I need the pager to be able to trigger all 3 slideshows with all 3 being devoted to their initial startingSlide relation.

Here's the JS code:

function featuresSlideshow(){

$('ul#main-features-leftbehind').cycle({
startingSlide: 0,
fx: 'scrollLeft',
timeout: 0,
speed:   1000,
easing: 'easeInOutQuart',
pager:  '#main-features-nav',
next: 'ul#main-features-upfront'

});
$('ul#main-features-rightbehind').cycle({
startingSlide: 2,
timeout: 0, 
fx: 'scrollLeft',
speed:   1000,
pager:  '#main-features-nav',
easing: 'easeInOutQuart',
next: 'ul#main-features-upfront'
});
$('ul#main-features-upfront').before('<ul id="main-features-nav"></ul>').cycle({
startingSlide: 1,
timeout: 0, 
fx: 'blindX',
rev: 开发者_如何转开发0,
speed:   1000,
easing: 'easeInOutQuart',
next: 'ul#main-features-upfront',
pager:  '#main-features-nav',
//after: afterUpfrontEvent, 
pagerAnchorBuilder: 
function(idx, slide) { 
    var src = $('img',slide).attr('src'); 
    return '<li><a href="#"><img src="' + src + '" width="50" height="50" /></a></li>'; 
    } 
});
}

And here's the HTML:

<ul id="main-features-leftbehind">
    <li><div style="background:url('../images/features_MainSlideShow_slide-0.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-1.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-2.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-3.jpg') no-repeat" class="bg"></div></li>
</ul>

<ul id="main-features-rightbehind">
    <li><div style="background:url('../images/features_MainSlideShow_slide-0.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-1.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-2.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-3.jpg') no-repeat" class="bg"></div></li>
</ul>

<ul id="main-features-upfront">
    <li>
    <img src="../images/features_MainSlideShow_slide-0.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>
    <li>
    <img src="../images/features_MainSlideShow_slide-1.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>

<li>
    <img src="../images/features_MainSlideShow_slide-2.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>
                            <li>
    <img src="../images/features_MainSlideShow_slide-3.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>
</ul>

Thank you so much guys, I've done a lot of reading on how to execute multiple slideshows, even Malsup created a "double" slideshow using a pager but I can't seem to make it work with a visual pager.

---

You have to build your own pager. Here's roughly how I did mine:

$('#slides').cycle();
$('#titles').cycle();

$('a.nav-button').click(function(e) { 
  var slide = $('a.nav-button').index(this);
  $('#slides').cycle(slide);
  $('#titles').cycle(slide);
  e.preventDefault();
});

Then just output your nav buttons manually (or using PHP/Ruby/whatever).