スクロールバーもあり、縦横の設定もできる多機能なスライダーsly.jsを使ってみた。

デモ

以下設定方法。

HTML

XHTML

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

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

JavaScript

$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' }); });

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変数のそれぞれの値にそれぞれの要素を定義すれば完成。