Question

在YUI Carousel中，我希望导航按钮包括显示在items下的prev和next按钮。默认情况下，这些按钮放在上面的项目中，我想放置在项目（或图像）之后的那些按钮

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

我使用上面但导航仍显示在项目的上方

Answer 1

您必须使用自定义导航按钮来解决此问题，请按照以下步骤操作：

在stylesheed
中使用以下css
.yui-carousel .yui-carousel-item-selected { border：none; } .yui-skin-sam .yui-carousel-nav { 位置：相对; 顶部：0px; 右：1px; 身高：1px; 背景：无; }
.yui-skin-sam .yui-carousel-button { display：none; } .yui-carousel-nav ul { display：none; }

对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
});

}）（）;

然后自定义导航使用这样的div：

        ......
        <li>
            999999999
        </li>
    </ol>
    <div>
        <button id="prevButton">&lt;</button>
        <button id="nextButton">&gt;</button>                 
    </div>

Answer 2

见这里

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

我已经理解了这个

{ prev: prev_id, next: nextId }

YUI Carousel按钮列表下的导航按钮

2 个答案: