2012-03-19 8 views
1

JavascriptのコードYUIカルーセルカスタムナビゲーション

YAHOO.util.Event.onDOMReady(function (ev) { 
    var carousel = new YAHOO.widget.Carousel("container", {isCircular: true, numVisible:1}); 
    console.log(carousel.set('navigation', {prev: document.getElementById('prev'), next: document.getElementById('next')})); 
    carousel.render(); 
    carousel.show(); 
}); 

HTML

<div id='container'> 
    <a href='#' ><span id='prev'> Prev </span></a> 
    <a href='#' ><span id='next'> Next </span></a> 
    <ol> 
     <li><img src='history_base_files/200.jpeg' height="300" width="300" /></li> 
     <li><img src='history_base_files/280.jpg' height="300" width="300" /></li> 
     <li><img src='history_base_files/350.jpg' height="300" width="300" /></li> 
     <li><img src='history_base_files/370.jpg' height="300" width="300" /></li> 
    </ol> 
</div> 

コンソール出力カルーセルのナビゲーションプロパティを設定するにfalse。オンラインで良い参考文献を見つけることができませんでした。

アンカーやスパンのようなカスタムナビゲーションでyuiカルーセルを作成するにはどうすればよいですか?解決策は、私のために働い報告して自分の質問に答える

答えて

0

HTML:

<div id='container'> 
     <a id='prev' href="#" class="yui-carousel-button yui-carousel-prev" role="button"><span><strong>Prev</strong></span></a> 
     <a id='next' href="#" class="yui-carousel-button yui-carousel-next" role="button"><span><strong>Next</strong></span></a> 
     <ol> 
      <li><a href='#'><img src='history_base_files/200.jpeg' height="300" width="300" /></a></li> 
      <li><img src='history_base_files/280.jpg' height="300" width="300" /></li> 
      <li><img src='history_base_files/350.jpg' height="300" width="300" /></li> 
      <li><img src='history_base_files/370.jpg' height="300" width="300" /></li> 
     </ol> 
    </div> 

カスタムボタンのクラスYUI-カルーセルボタン、YUI-カルーセル-前は& YUI-カルーセル次の追加要素が問題を解決しました。