C04-08 : Slider Kit
準備
jQueryライブラリのため、jQueryとセットで読み込みます。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>
<!--[if >E 6]><link re>="stylesheet" type="text/css" href="sliderkit-demos-ie6.css"><![endif>-->
<!--[if >E 7]><link re>="stylesheet" type="text/css" href="sliderkit-demos-ie7.css"><![endif>-->
<!--[if >E 8]><link re>="stylesheet" type="text/css" href="sliderkit-demos-ie8.css"><
$(function(){
$(".photoslider-mini").sliderkit();
});
<div class="sliderkit photoslider-mini"> <div class="sliderkit-panels"> <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a href="#"><span>前へ</span></a></div> <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a href="#"><span>次へ</span></a></div> <div class="sliderkit-panel"><img src="img/001.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/002.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/003.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/004.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/005.jpg" width="858" height="335"></div> </div> </div>
標準的なスライダー
ナビゲーション要素をスライド中央下に配置し、スライドのアニメーションを変更したよく見る形のスライダーです。サンプルでは「オートスライドを無効」「ループ」「スライドして切り替え」「マウスオーバーで次へ前へを表示」「ナビゲーション要素を表示」という設定になっています。
$(function(){
$(".photoslider-st").sliderkit({
auto: false,
circular: true,
panelfx: 'sliding',
panelbtnshover: true
});
});
<div class="sliderkit photoslider-st"> <div class="sliderkit-nav"> <div class="sliderkit-nav-clip"> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </div> <div class="sliderkit-panels"> <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a href="#"><span>前へ</span></a></div> <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a href="#"><span>次へ</span></a></div> <div class="sliderkit-panel"><img src="img/004.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/001.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/002.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/003.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/005.jpg" width="858" height="335"></div> </div> </div>
サムネイル付きのスライダー
ナビゲーションとしてサムネイルを配置したスライダーです。一度に表示するサムネイルの数やサムネイルのスクロール制御まで行うことができます。サンプルでは「オートスライドを無効」「ループ」「スライドして切り替え」「マウスオーバーで次へ前へを表示」「ナビゲーション要素（サムネイル）を表示」という設定になっています。
$(function(){
$(".photoslider-thumb").sliderkit({
auto: false,
circular: true,
panelfx: 'sliding',
panelbtnshover: true,
navscrollatend: true,
shownavitems: 3
});
});
<div class="sliderkit photoslider-thumb"> <div class="sliderkit-nav"> <div class="sliderkit-nav-clip"> <ul> <li><a href="#"><img src="img/004.jpg" width="100" height="39"></a></li> <li><a href="#"><img src="img/001.jpg" width="100" height="39"></a></li> <li><a href="#"><img src="img/002.jpg" width="100" height="39"></a></li> <li><a href="#"><img src="img/003.jpg" width="100" height="39"></a></li> <li><a href="#"><img src="img/005.jpg" width="100" height="39"></a></li> <li><a href="#"><img src="img/006.jpg" width="100" height="39"></a></li> <li><a href="#"><img src="img/007.jpg" width="100" height="39"></a></li> <li><a href="#"><img src="img/008.jpg" width="100" height="39"></a></li> </ul> </div> </div> <div class="sliderkit-panels"> <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a href="#"><span>前へ</span></a></div> <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a href="#"><span>次へ</span></a></div> <div class="sliderkit-panel"><img src="img/004.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/001.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/002.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/003.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/005.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/006.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/007.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/008.jpg" width="858" height="335"></div> </div> </div>
カルーセル
先ほどのスライダーに使ったサムネイルだけを抜き出し、カルーセルとして使うことができます。サンプルでは「オートスライドを無効」「最大4つ表示」「ループ」という設定になっています。
また、アドオンでマウスホイールのJavaScriptを読み込むことでカルーセル上でマウスホイールを回すと、カルーセルの操作ができるようになります。
<script type="text/javascript" src="external/jquery.mousewheel.min.js"></script>
$(function(){
$("#carousel-demo1").sliderkit({
auto: false,
shownavitems: 4,
circular: true,
mousewheel: true
});
});
<div id="carousel-demo1" class="sliderkit carousel-demo1"> <div class="sliderkit-nav"> <div class="sliderkit-nav-clip"> <ul> <li><a href="#carousel"><img src="img/001.jpg" width="200" height="78"></a></li> <li><a href="#carousel"><img src="img/002.jpg" width="200" height="78"></a></li> <li><a href="#carousel"><img src="img/003.jpg" width="200" height="78"></a></li> <li><a href="#carousel"><img src="img/004.jpg" width="200" height="78"></a></li> <li><a href="#carousel"><img src="img/005.jpg" width="200" height="78"></a></li> <li><a href="#carousel"><img src="img/006.jpg" width="200" height="78"></a></li> <li><a href="#carousel"><img src="img/007.jpg" width="200" height="78"></a></li> <li><a href="#carousel"><img src="img/008.jpg" width="200" height="78"></a></li> <li><a href="#carousel"><img src="img/009.jpg" width="200" height="78"></a></li> <li><a href="#carousel"><img src="img/010.jpg" width="200" height="78"></a></li> </ul> </div> <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#"><span>前へ</span></a></div> <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#"><span>次へ</span></a></div> </div> </div>
スライドショー
スライドショーとして見せることもできます。サンプルでは4秒ごとに自動でスライドが切り替わるようになっており、停止ボタンで自動切り替えのON/OFFもできます。
また、「sliderkit.timer.1.0.pack.js」を読み込むことで、切り替わるまでのタイマーを設置することもできます。
<script type="text/javascript" src="addons/sliderkit.timer.1.0.pack.js"></script>
$(function(){
$(".slideshow-standard").sliderkit({
circular: true,
fastchange: false,
timer: {
fadeout:0.7
}
});
});
<div class="sliderkit slideshow-standard"> <div class="sliderkit-timer-wrapper"> <div class="sliderkit-timer"></div> </div> <div class="sliderkit-nav"> <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a href="#"><span>前へ</span></a></div> <div class="sliderkit-btn sliderkit-play-btn"><a href="#"><span>再生</span></a></div> <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a href="#"><span>次へ</span></a></div> </div> <div class="sliderkit-panels"> <div class="sliderkit-panel"><img src="img/001.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/002.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/003.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/004.jpg" width="858" height="335"></div> <div class="sliderkit-panel"><img src="img/005.jpg" width="858" height="335"></div> </div> </div>
ニュース スライダー
こうなるとスライダーというよりはタブに近いと思いますが、Webサイトのトップページにあるようなトピックを切り替えられるコンテンツを作ることもできます。サンプルは「自動切り替え」「マウスオーバーで切り替え」といった設定になっています。
$(function(){
$(".newslider-vertical").sliderkit({
shownavitems: 3,
verticalnav: true,
navitemshover: true,
circular: true
});
});
<div class="sliderkit newslider-vertical"> <div class="sliderkit-nav"> <div class="sliderkit-nav-clip"> <ul> <li><span>HTML</span></li> <li><span>CSS</span></li> <li><span>JavaScript</span></li> </ul> </div> </div> <div class="sliderkit-panels"> <div class="sliderkit-panel"> <div class="sliderkit-news"> <h3>HTML</h3> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト...</p> <a class="sliderkit-news-readmore" href="#">Read more</a> </div> </div> <div class="sliderkit-panel"> <div class="sliderkit-news"> <h3>CSS</h3> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト...</p> <a class="sliderkit-news-readmore" href="#">Read more</a> </div> </div> <div class="sliderkit-panel"> <div class="sliderkit-news"> <h3>JavaScript</h3> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト...</p> <a class="sliderkit-news-readmore" href="#">Read more</a> </div> </div> </div> </div>
メニューを横にしてスライドさせることもできます。サンプルはメニューをクリックしたら対応するコンテンツがスライドしてきます。
$(function(){
$(".newslider-horizontal").sliderkit({
shownavitems: 5,
panelfx: "sliding",
fastchange: false
});
});
<div class="sliderkit newslider-horizontal"> <div class="sliderkit-nav"> <div class="sliderkit-nav-clip"> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">CGI</a></li> </ul> </div> </div> <div class="sliderkit-panels"> <div class="sliderkit-panel"> <div class="sliderkit-news"> <h3>HTML</h3> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </div> </div> <div class="sliderkit-panel"> <div class="sliderkit-news"> <h3>CSS</h3> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </div> </div> <div class="sliderkit-panel"> <div class="sliderkit-news"> <h3>JavaScript</h3> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </div> </div> <div class="sliderkit-panel"> <div class="sliderkit-news"> <h3>PHP</h3> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </div> </div> <div class="sliderkit-panel"> <div class="sliderkit-news"> <h3>CGI</h3> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </div> </div> </div> </div>
このようにSlider Kitでは、ナビゲーション要素とスライド要素をを連携させることはもちろんのこと、分割し独立させて動かすこともできます。こうした特徴を応用することで画像スライダーに限らずカルーセル・スライドショー・タブメニューといったユーザーインターフェイスを作成することができます。
オプション
| プロパティ | 初期値 | 説明 |
|---|---|---|
| cssprefix | sliderkit | Slider KitのHTMLには「sliderkit-○○」というクラス名が必ずつきます。例えば「sliderkit-go-next」のクラス名を付けられた要素はスライドを次へ進めるためのボタンとなりますが、このクラス名の「sliderkit」の部分を変更したい場合はこのオプションで設定することができます。 |
| start | 0 | 最初に表示する画像の順番を設定します。0が1番目となります。 |
| auto | true | trueの場合、スライドの自動切り替えが有効になります。 |
| autospeed | 4000 | スライドの自動切り替えの待機時間をミリ秒単位で設定します。 |
| autostill | false | trueの場合、スライド部分にマウスオーバーした際に自動切り替えを止めます。 |
| mousewheel | false |
マウスホイールの操作でスライドやナビゲーション（カルーセル）を切り替えられるようになります。この機能を使う場合は別途アドオンのJavaScriptを読み込まなければいけません。
<script type="text/javascript" src="external/jquery.mousewheel.min.js"></script> |
| keyboard | false | キーボードの左右矢印キーでスライドを切り替えられるようになります。ナビゲーション要素に有効で、一度ナビゲーション要素にフォーカスを当てないと動作しません。 |
| circular | false | trueの場合、最後のスライドの次は最初のスライドになります。falseの場合、最後のスライドの次にはいけません。 |
| shownavitems | 5 | ナビゲーション（カルーセル）の数を設定します。 |
| navitemshover | false | trueの場合、ナビゲーション（カルーセル）にマウスオーバーしただけでスライドが切り替わります。 |
| navclipcenter | false | trueの場合、sliderkit-navの要素が中央に配置されます。 |
| navcontinuous | false | trueの場合、ナビゲーション（カルーセル）用の「次へ」「前へ」にマウスオーバーしただけでナビゲーション（カルーセル）が継続的に切り替わります。 |
| scroll | shownavitemsの値 |
ナビゲーション（カルーセル）用の「次へ」「前へ」で切り替わる数を設定します。初期値はshownavitemsの値となるため、現在表示されている内容が全て入れ替わります。 次のような組み合わせにすることでナビゲーション（カルーセル）がスムーズにスクロールしていく設定にすることができます。
$("#carousel-demo1").sliderkit({
navcontinuous: true,
scroll: 1,
scrolleasing: 'linear'
});
|
| navscrollatend | false | trueの場合、現在表示されているナビゲーション（カルーセル）の最初か最後をクリックすると、次のナビゲーション（カルーセル）群を表示します。ナビゲーション（カルーセル）用の「次へ」「前へ」ボタンを用意していない場合、この設定がtrue（有効）になっていない場合は、shownavitemsで設定した数分のナビゲーション（カルーセル）しか表示されません。 |
| navpanelautoswitch | true | trueの場合、ナビゲーション（カルーセル）の「次へ」「前へ」ボタンに連動してスライドが切り替わります。 |
| navfx | sliding | ナビゲーション（カルーセル）の切り替えアニメーションを 'sliding' or 'none' で設定します。 |
| scrollspeed | 600 | ナビゲーション（カルーセル）の切り替えアニメーションスピードをミリ秒単位で設定します。 |
| scrolleasing | swing | ナビゲーション（カルーセル）の切り替えアニメーションの種類を 'linear' or 'swing' で設定します。jQuery easing Pluginsを読み込むことで設定する項目を拡張することができます。 |
| panelfx | fading | スライドの切り替えアニメーションを 'fading' or 'sliding' or 'none' で設定します。 |
| panelfxspeed | 700 | スライドの切り替えアニメーションスピードをミリ秒単位で設定します。 |
| panelfxeasing | スライドのの切り替えアニメーションの種類を 'linear' or 'swing' で設定します。jQuery easing Pluginsを読み込むことで設定する項目を拡張することができます。 | |
| panelfxfirst | none | 'fading' と指定することで、ページを読み込んだ際にSlider Kitをフェードイン表示させることができます。その際のアニメーションスピードはpanelfxspeedに依存します。 |
| panelbtnshover | false | trueの場合、「次へ」「前へ」ボタンを非表示にしてスライドにマウスオーバーした際に表示します。 |
| panelclick | false | trueの場合、スライドをクリックすることで次のスライドに切り替わります。 |
| verticalnav | false | ナビゲーション（カルーセル）を縦方向にスライディングするようにします。 |
| verticalslide | false | trueの場合かつpanelfxで「sliding」を指定している場合、スライドが切り替わる方向を縦にします。 |
| tabs | false | タブメニューを使う場合にtrueにします。 |
| freeheight | false | trueの場合、スライドの高さを固定します。 |
| fastchange | true | trueの場合、スライドの切り替えアニメーションが終わらないと次のスライドに切り替えられなくなります。 |
| counter | false |
trueの場合、counterアドオンが有効になります。このとき「sliderkit.counter.1.0.pack.js」を読み込まなければいけません。
<script type="text/javascript" src="addons/sliderkit.counter.1.0.pack.js"></script> |
| delaycaptions | false |
trueの場合、delaycaptionsアドオンが有効になります。このとき「sliderkit.delaycaptions.1.1.pack.js」を読み込まなければいけません。
<script type="text/javascript" src="addons/sliderkit.delaycaptions.1.1.pack.js"></script> |
| timer | false |
trueの場合、timerアドオンが有効になります。このとき「sliderkit.timer.1.0.pack.js」を読み込まなければいけません。
<script type="text/javascript" src="addons/sliderkit.timer.1.0.pack.js"></script> |
| debug | false | tureの場合、デバッグモードが実行されます。 |
コールバック
| panelfxbefore | function(){} | スライドの切り替え開始直前に実行されます。 |
| panelfxafter | function(){} | スライドの切り替えが完了した時点で実行されます。 |
| navfxbefore | function(){} | ナビゲーション（カルーセル）の切り替え開始直前に実行されます。 |
| navfxafter | function(){} | ナビゲーション（カルーセル）の切り替えが完了した時点で実行されます。 |