使用 Cycle2 链接幻灯片答案

【问题标题】：Linking slideshows using Cycle2使用 Cycle2 链接幻灯片
【发布时间】：2013-04-02 17:36:02
【问题描述】：

我正在寻找一种使用 Cycle2 将幻灯片链接在一起的方法。我知道在原来的 Cycle 中有一种方法可以做到这一点，但是新的 API 有点不同。

基本上，我需要 2 个单独的区域来播放不同的幻灯片，但我需要将它们链接起来，这样如果我要在一个幻灯片上单击下一步，另一个也会前进。这也适用于寻呼机；当我尝试在两个幻灯片中使用 data-cycle-pager="#pager" 时，寻呼机被复制，并且事情开始中断。

非常感谢您的运气。谢谢！

【问题讨论】：

请记住，如果答案有效，您应该点击它旁边的复选标记，以便将来的访问者得到帮助。
我也在寻找类似的功能。我正在查看 lucuma 的答案，它的效果很好，但是如何将寻呼机集成到其中？

标签： jquery jquery-plugins cycle jquery-cycle2

【解决方案1】：

我会做以下事情：

将下一个/上一个添加到其中一个幻灯片
挂钩到该幻灯片的 after 事件并手动更改另一个滑块。

这里是代码：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');
});

【讨论】：