タッチやマウススライドにも対応しているシンプルなjQueryスライダー「Excolo Slider」をご紹介します。ページネーションや前／次ボタンナビゲーション、自動再生スライドショーといったスライダーにとっての必要な機能は一通り揃っています。実際のデモページではレスポンシブにも対応しているので、スマホやタブレットでの動作を考える際には一つの選択肢になりますね。
[ads_center]
使い方
難しい設定は特にありません。いつも通りhead内にjQuery、プラグインを読み込みます。
1 2 3 | <script src="javascripts/jquery-1.9.1.min.js"></script><script src="javascripts/jquery.excoloSlider.min.js"></script><link href="stylesheets/jquery.excoloSlider.css" rel="stylesheet"> |
マークアップもこれ以上ないくらいシンプルです。data-plugin-slide-captionにキャプションを指定することができます。
1 2 3 4 5 6 | <div id="slider"> <img src="images/image1.jpg"> <img src="images/image2.jpg"> <img src="images/image3.jpg" data-plugin-slide-caption="キャプション"> ・・・略・・・</div> |
最後にプラグインを初期化してあげればOKです。
1 2 3 | $(function () { $("#slider").excoloSlider();}); |
オプションもたくさんあって便利ですね。touchNavやmouseNavといったものも指定可能です。
ということで、シンプルなスライダーでオプションも充実しているjQueryスライダー「Excolo Slider」でした。
