多malsup周期幻灯片，startingSlide保持同步

Question

好球员，我回来了另一个复杂的问题。我有3张独立的Malsup循环幻灯片组成一个大的幻灯片。当前幻灯片是在前面和其他2背后，左一个与当前的起始滑动-1，并用起始滑动1是正确的。这工作。当我点击#next时，它会触发全部三个，这很好。问题是我需要实现寻呼机和寻呼机只控制中央幻灯片，而不是其他2.

我需要寻呼机能够触发所有3幻灯片显示所有3被投入到他们的初始startingSlide关系。

这里的JS代码：

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>'; 
    } 
}); 
} 

而这里的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> 

谢谢你这么多家伙，我已经做了阅读有关如何执行多个幻灯片了很多，甚至Malsup创建使用寻呼机“双”幻灯片，但我似乎无法使其与视觉寻呼机工作。

Answer 1

你必须建立自己的传呼机。以下是我大致有没有地雷：手动

$('#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(); 
}); 

然后，只需输出你的导航按钮（或使用PHP /红宝石/不管）。