0

少し前に、jQuery サイクル プラグインの複数のインスタンスを 1 つのページで実行し、それぞれが個別のコントロール セットを使用するというトピックを開始しました。リンク:異なる前/次ボタンを使用するには、複数の jQuery サイクル スライダーが必要です

正しいアイデアのように思われる応答がありましたが、それを機能させることができませんでした。私はまだjavascriptを学んでいて、時々正しい場所に物事を入れるのに苦労していますが、考えられるあらゆる場所に与えられたコードを追加しようとしましたが、何もうまくいきませんでした. これは私の元のスクリプトでした：

$('.slides').cycle({ 
        fx:      'scrollHorz', 
        speed:  'slow', 
        timeout: 0, 
        nowrap: true,
        pause:   1,
        prev: $('.slider-arrow-left'),
        next: $('.slider-arrow-right'),
        cssBefore:{ 
            top: 0,
            opacity: 1,
            display: 'block'
        }, 
        animOut: {  
            top: 360
        },
        before: function(curr, next, opts){
            var $curr = $(curr);
            var $next = $(next);
        },
        pause: 1,
        pager: '.slider-controls',
        pagerAnchorBuilder: function (idx, slide) {
            return '.slider-controls li:eq(' + idx + ') a';
        }
    });

提供されたソリューション コード:

$('.slides').each(function(){
     /* look for controls only within this instance*/
        var nextBtn=$(this).parent().find('.slider-arrow-left');
            $(this).cycle({ 
            next: nextBtn
        });
        var prevBtn=$(this).parent().find('.slider-arrow-right');
            $(this).cycle({ 
            prev: prevBtn
        });
    });

これは正しいコードですか？もしそうなら、誰かが私に完全なコードを教えてもらえますか? 私の基本的な HTML レイアウトは次のとおりです (ページ上で 4 回繰り返される完全なコード):

<div class="slider">
<div class="slides">
    <div class="slide">
        Images
    </div>
    <div class="slide">
        Images
    </div>

</div>
<img src="images/arrow-L.png" alt="Left" class="slider-arrow-left"/>
<img src="images/arrow-R.png" alt="Right" class="slider-arrow-right"/>
</div><!--slider-->
4

2 に答える 2

0

わかりました、私は今あなたの問題を理解しています。

まず、表示する矢印を表示するには、スタイリングを設定する必要がありleft: 0;ました。

次に、1 つのページに複数の「サイクル」プラグインを含めるには、それらに異なる名前を割り当て、矢印属性に異なる名前を割り当てる必要があります。そうしないと、すべてが同じことを制御します。非常に多くのプロパティが必要かどうかはわかりませんが、それをいじらないことにしました。

ここに作業フィドルがあります：http://jsfiddle.net/gugahoi/gbYhB/12/

そして、主な変更点は次のとおりです。

HTML

<h3>Website Design</h3>
<div class="slider">
    <div class="slides" id="cycleOne">  <!-- Added ID -->
...
...
    <img src=".../arrow-L.png" alt="Left" class="slider-arrow-left move-left"/> <!-- Added class 'move-left' to target with jquery-->
    <img src=".../arrow-R.png" alt="Right" class="slider-arrow-right move-right"/> <!-- Added class 'move-right' to target with jquery-->
</div><!--slider-->
<h3>Print Design</h3>
<div class="slider">
    <div class="slides" id="cycleTwo">  <!-- Added ID -->
    ...
    ...
    <img src=".../arrow-L.png" alt="Left" class="slider-arrow-left move-left2"/> <!-- Added class 'move-left2' to target with jquery-->
    <img src=".../arrow-R.png" alt="Right" class="slider-arrow-right move-right2"/>  <!-- Added class 'move-right2' to target with jquery-->
</div><!--slider-->

JavaScript

$('#cycleOne').cycle({  // id of first cycle
    ...
    prev: $('.move-left'),  // Targeting classes for the first set of arrows
    next: $('.move-right'), // to control the first cycling
    ...
});
$('#cycleTwo').cycle({  // id of second cycle
    ...
    prev: $('.move-left2'), // Targeting classes for the second set of arrows
    next: $('.move-right2'),// to control the second cycling
    ...
});
于 2013-02-02T03:50:31.297 に答える