使用循環2

Question

鏈接幻燈片我正在尋找一種方式來連接在一起使用循環2幻燈片。我知道有一種方法可以在原始循環中執行此操作，但新API與此有所不同。

基本上，我需要爲不同的幻燈片2個獨立區域，但我需要他們鏈接，這樣，如果我點擊一個幻燈片演示下，對方會提前爲好。這也適用於尋呼機;當我嘗試在兩個幻燈片使用data-cycle-pager="#pager"，尋呼機被複制，事情開始破裂。

對此有何運氣是非常讚賞。謝謝！

Answer 1

我會做到以下幾點：

1. 下一個/上一個添加到幻燈片的一個
2. 鉤成幻燈片播放的事件之後並手動更改其他滑塊。

下面是代碼：http://jsfiddle.net/lucuma/tQ4Jj/4/

HTML：

<div id="slideone" class="cycle-slideshow item" data-cycle-timeout="3000" data-cycle-speed="300" data-cycle-slides="> div.cycle-slide" data-cycle-fx="fade" data-cycle-pager-template="<a href='#'>{{cycleTitle}}</a>"> 

    <div class="cycle-slide" data-cycle-title="Title 1" > 
     <img src="http://placehold.it/550x550/" /> 
     <h2>My title 1</h2> 
    </div> 
    <div class="cycle-slide"> 
     <img src="http://placehold.it/550x550/ff0000" data-cycle-title="Title 2" /> 
<h2>My title 2</h2> 
    </div> 
    <div class="cycle-slide" data-cycle-title="Title 3"> 
     <img src="http://placehold.it/550x550/" /> 
<h2>My title 3</h2> 
    </div> 

    <a class="cycle-prev">Prev</a>&nbsp;&nbsp;<a class="cycle-next">Next</a> 
</div> 

<br /><br /><br /><br /><br /> 
<div id="slidetwo" class="cycle-slideshow item" data-cycle-timeout="3000" data-cycle-speed="300" data-cycle-slides="> div.cycle-slide" data-cycle-fx="fade" data-cycle-paused="true"> 

    <div class="cycle-slide" data-cycle-title="Title 1" > 
     <img src="http://placehold.it/550x550/" /> 
     <h2>My title 1</h2> 
    </div> 
    <div class="cycle-slide"> 
     <img src="http://placehold.it/550x550/ff0000" data-cycle-title="Title 2" /> 
<h2>My title 2</h2> 
    </div> 
    <div class="cycle-slide" data-cycle-title="Title 3"> 
     <img src="http://placehold.it/550x550/" /> 
<h2>My title 3</h2> 
    </div> 


</div> 

JS：

$('#slideone').on('cycle-next', function(event, opts) { 
    $('#slidetwo').cycle('next'); 
}); 

$('#slideone').on('cycle-prev', function(event, opts) { 
    $('#slidetwo').cycle('prev'); 
});