1

Cycle2 を使用してスライドショーをリンクする方法を探しています。元のサイクルでこれを行う方法があったことは知っていますが、新しい API はかなり異なります。

基本的に、スライドショーごとに 2 つの領域が必要ですが、一方のスライドショーで [次へ] をクリックすると、もう一方のスライドショーも同様に進むように、それらをリンクする必要があります。これはポケットベルにも当てはまります。両方のスライドショーで使用しようとするとdata-cycle-pager="#pager"、ページャーが重複し、問題が発生し始めます。

これで運が良ければ大歓迎です。ありがとう！

4

1 に答える 1

1

私は次のことをします：

  1. スライドショーの 1 つに次/前を追加します
  2. そのスライドショーの 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');
});
于 2013-04-09T19:20:04.130 に答える