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 函数调用使用这样的想法：

    (function () { var carousel;

    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 回答