Question

in the YUI Carousel, i want nav button include prev and next buttons showing under the items.by default these buttons placed in upper items and i want placed those after the items (or images)

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

i use above but still navigation appear in above of items

Answer 1

you must use custom navigation buttons for solve this problem, follow this:

1. use below css in the stylesheed

   .yui-carousel .yui-carousel-item-selected {
   border: none;
   }
   .yui-skin-sam .yui-carousel-nav {
   position: relative;
   top: 0px;
   right: 1px;
   height: 1px;
   background: none;
   }
   .yui-skin-sam .yui-carousel-button {
   display: none;
   }
   .yui-carousel-nav ul {
   display: none;
   }

2. use a think like this for js function call:

   (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. then for custom navigation use a div like this:

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