スクロールバーもあり、縦横の設定もできる多機能なスライダーsly.jsを使ってみた。
以下設定方法。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div class="slyWrap example3"> <div class="scrollbar"> <div class="handle"></div> </div> <div class="sly" data-options='{ "horizontal": 1, "itemNav": "basic", "dragContent": 1, "scrollBy": 1, "cycleBy": "pages", "cycleInterval": 1800, "startPaused": 1, "pauseOnHover": 1 }'> <ul class="big cfix adds" data-items="6"> </ul> </div> <div class="controls btn-toolbar"> <button class="btn prevPage">« 前</button> <button class="btn nextPage">次 »</button> <button class="btn" data-action="toStart">最初へ</button> <button class="btn" data-action="toCenter">中央へ</button> <button class="btn" data-action="toEnd">最後へ</button> <button class="btn" data-action="add">追加</button> <button class="btn" data-action="remove">削除</button> </div> </div> |
slyWrap以下はセットで考えたほうが良いかも。
.controlsは適宜設置。
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $section.find(".slyWrap").each(function(i,e){ //if( i != 3 ) return; var cont = $(this), frame = cont.find(".sly"), slidee = frame.find("ul"), scrollbar = cont.find(".scrollbar"), pagesbar = cont.find(".pages"), options = frame.data("options"), controls = cont.find(".controls"), prevButton = controls.find(".prev"), nextButton = controls.find(".next"), prevPageButton = controls.find(".prevPage"), nextPageButton = controls.find(".nextPage"); options = $.extend( {}, options, { scrollBar: scrollbar, pagesBar: pagesbar, prev: prevButton, next: nextButton, prevPage: prevPageButton, nextPage: nextPageButton, disabledClass: 'btn-disabled' }); }); |
cont変数のそれぞれの値にそれぞれの要素を定義すれば完成。
