1

YUI Carousel で、アイテムの下に表示される前と次のボタンを含むナビゲーション ボタンが必要です。デフォルトでは、これらのボタンは上部のアイテムに配置され、アイテム (または画像) の後に配置したい

        <div id="container">
            <ol id="carousel">
                <li>
                    1111111
                </li>
                <li>
                    222222
                </li>
                <li>
                    3333333
                </li>
                <li>
                    444444
                </li>
                <li>
                    5555555
                </li>
                <li>
                    66666666
                </li>
                <li>
                    7777777
                </li>
                <li>
                    8888888
                </li>
                <li>
                    999999999
                </li>
            </ol>
            <div class="yui-carousel-nav">
                <button id="next" class="yui-carousel-button yui-carousel-next"><span>next</span></button>
                <button id="prev" class="yui-carousel-button yui-carousel-prev"><span>prev</span></button>
            </div>                 
        </div>

上記を使用しますが、アイテムの上にナビゲーションが表示されます

4

2 に答える 2

2

この問題を解決するには、カスタム ナビゲーション ボタンを使用する必要があります。

  1. スタイルシートで以下のCSSを使用

    .yui-carousel .yui-carousel-item-selected { ボーダー: なし; } .yui-skin-sam .yui-carousel-nav { 位置: 相対; 上: 0px; 右: 1px; 高さ: 1px; 背景: なし; }
    .yui-skin-sam .yui-carousel-button { 表示: なし; } .yui-carousel-nav ul { 表示: なし; }

  2. js関数呼び出しには次のように考えてください：

    (関数 () { var カルーセル;

    YAHOO.util.Event.onDOMReady(function (ev) {
    var carousel = new YAHOO.widget.Carousel("container", {
        isCircular:     false, 
        numVisible:     3,
        navigation: { prev: 'prevButton' , next: 'nextButton' }
    });
    carousel.set("selectedItem", 0); 
    carousel.render(); // get ready for rendering the widget
    carousel.show();   // display the widget
});

    })();

  3. カスタム ナビゲーションには、次のような div を使用します。

            ......
        <li>
            999999999
        </li>
    </ol>
    <div>
        <button id="prevButton">&lt;</button>
        <button id="nextButton">&gt;</button>                 
    </div>
于 2012-06-11T13:34:41.810 に答える
1

ここを参照

http://developer.yahoo.com/yui/carousel/#cssref

私はこのように理解しました

{ prev: prev_id, next: nextId }
于 2012-06-11T13:04:23.500 に答える