0

私は sorgalla jcarousel プラグインをセットアップしました。私がやろうとしているのは、一方が他方に影響を与えるカルーセルの 2 つのインスタンスを持つことです。1 つはブロック/垂直スタイルで、もう 1 つは水平スタイルです。

残念ながら、私はJavascriptとJqueryを学び始めたばかりなので、ここから先に進む方法がよくわかりません。少なくともどこを見ることができるかについてのアドバイスは素晴らしいでしょう。

これが2回呼び出されている関数です...

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
  start: 2, // Configuration goes here
    wrap: "circular",
    auto: 1,
    scroll: 1,

});
});

jQuery(document).ready(function() {
jQuery('#second-carousel').jcarousel({
    start: 2, // Configuration goes here
    wrap: "circular",
    auto: 1,
    scroll: 1,

});
});
</script>

これが実際にjcarouselsを挿入する場所です...

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li>test</li>
    <li>test1</li>
    <li>test2</li>

    </li>
</ul>

<ul id="second-carousel" class="jcarousel-skin-tango">
    <li>test</li>
    <li>test1</li>
    <li>test2</li>

    </li>
</ul>

2つを同期させる方法はありますか?上部の方向ナビゲーションを押すと、2番目のナビゲーションも制御されますか? これがテストされているサイトです... http://gonuts.ie/?page_id=99

最終的に私の目標は、http://www.skysports.comのページの上部にあるものを達成することです。おそらく、もっと簡単な方法があるかどうかはわかりません。再度、感謝します。

4

1 に答える 1

2

これは、2つのjCarouselsをSkysportsサイトのようにリンクする方法です（Skysportsの例は単一のカルーセルであるというRick Calderのコメントに注意してください）。

var carousel_2;
$('#mycarousel').jcarousel({
    start: 1,
    wrap: "circular",
    scroll: 1,
    itemFirstInCallback: {
        onBeforeAnimation: function(carousel, item, index, action) {
            if (carousel_2) {
                carousel_2[action]();
            }
        }
    }
});
$('#second-carousel').jcarousel({
    start: 2,
    wrap: "circular",
    scroll: 1,
    vertical: true,
    buttonNextHTML: null,
    buttonPrevHTML: null,
    initCallback: function(c) {
        carousel_2 = c;
    }
});

デモ

Operaでテストし、Sparky672のコメントを参照すると、で問題は発生しませんでしたwrap:"circular"。

于 2012-12-09T22:46:28.603 に答える