0

このWebサイトのカルーセルの例を使用しています。
ページ上の単一のカルーセルの場合はうまく機能しますが、同じページに複数のカルーセルがある場合は、上部のカルーセルのナビゲーションボタンのみが表示され、上部のカルーセルが移動すると、他のすべてが移動します。
私はそれらのそれぞれを独立して動かそうとしています... 

              <script src="/Scripts/jMyCarousel.js" type="text/javascript"></script>
              ...

             foreach(something)
             {
              <div class="jMyCarousel">
                 <ul>
                    <li>image1</li>
                    <li>image1</li>
                    ...
                 </ul>
              </div>
             }
              ...

             <script type="text/javascript">
                $(function() {
                $(".jMyCarousel").jMyCarousel({ visible: '50%', eltByElt: true });
                });
             </script>

私の知る限り、スクリプト（最後の部分）でクラス（たとえば「.jMyCarousel」）を使用している場合、このクラス名を持つアイテムごとに新しいカルーセルを作成する必要があります。しかし、ここではそうではありません。ケース。

各カルーセルを独立させる方法はありますか？

4

2 に答える 2

0

あなたのためにこのリンクを見つけました

画像カルーセル1.0.3がリリースされました

ここに複数のインスタンスのデモがあります

デモページ

デモページの検査からのコード：

    $(function() {
        $(".JMyCarousel#carousel1").jMyCarousel({
            visible: '100%'
        });
        $(".JMyCarousel#carousel2").jMyCarousel({
            visible: '4',
            eltByElt: true,
            evtStart: 'mousedown',
            evtStop: 'mouseup'
        });
        $(".JMyCarousel#carousel3").jMyCarousel({
            visible: '3',
            auto : false, 
            vertical : true,
            speed : 500
        });
    });

divがいくつあるかわからないので、これが問題になります。IDを動的に作成できませんか？

于 2012-06-19T03:52:00.653 に答える
0

セレクターを「そのまま」使用しないでください。それは本当の繰り返しではありません。イテレータを使用し、ループごとに動作を適用します。例：

$(".jMyCarousel").each(function(){ 
    $(this).jMyCarousel({ visible: '50%', eltByElt: true });
});

コメントを回答として投稿したので、質問を閉じることができます:)

于 2012-06-22T23:02:21.820 に答える