[JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ！ -slick
Post on:2014年4月1日
sponsors
画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示するカルーセルのスクリプトを紹介します。
自由度の高いカルーセルってなかなか無いのですが、「ラスト カルーセル」とサブタイトルがついてるくらい探し回って最後にたどり着くのはこれという出来です。
slickの特徴
「the last carousel」とあるだけあって、カルーセルとしての機能は全て備えています。
- レスポンシブ対応
- CSS3はサポートブラウザ時に動作
- オートプレイ対応
- ナビゲーションはドット・アローの選択が可能
- 矢印キーでのキーボード操作に対応
- ドラッグ・スワイプ操作に対応
- 無限ループ対応
slickのデモ
デモでは、さまざまなカルーセルの動きを試せます。
カルーセルの操作は下部のドット、左右のアローだけでなく、キーボードの矢印キー、ドラッグ・スワイプ操作にも対応しています。
これらの操作は全てオプションで簡単にオン・オフを設定できます。
Single Item
一つのアイテムをカルーセルで次々に表示します。スライドの方向は水平でなく、垂直にすることもできます。
Multiple Items
複数のアイテムを同時にカルーセルに表示します。
Responsive Display
レスポンシブ対応で、表示サイズに合わせてアイテムの表示数が最適化されます。
One at a Time
複数のアイテムを一つずつスライドさせます。
Autoplay
スライドのオートプレイにも対応しています。
Add & Remove
アイテムを追加・削除することもできます。
Filtering
アイテムのフィルタリング機能も備えています。
slickの使い方
Step 1: 外部ファイル
head内に当スタイルシート、</body>の上あたりにjquery.jsと当スクリプトを配置します。
<head> ... <link rel="stylesheet" type="text/css" href="slick.css"/> </head> <body> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="slick.min.js"></script> </body>
Step 2: HTML
カルーセルで表示する要素をdivなどで内包します。
各パネルはデフォルトでdiv要素になっており、変更も可能です。
<div class="your-class"> <div>your content</div> <div>your content</div> <div>your content</div> </div>
Step 3: JavaScript
ラッパーをjQueryのセレクタで指定して、スクリプトを実行します。
$('.your-class').slick({
setting-name: setting-value
});
スクリプトのオプション
オプションでは、
- accessibility
- 矢印キーの操作の有無
- autoplay
- オートプレイの有無
- autoplaySpeed
- オートプレイ時のスピード
- arrows
- 左右の矢印のナビゲーションの有無
- cssEase
- CSS3アニメーションの設定
- dots
- 下部のドットのナビゲーションの有無
- draggable
- ドラッグ操作の有無
- fade
- フェードの有無
- easing
- イージングの設定
- infinite
- 無限ループの有無
- onBeforeChange
- スライドする前のコールバック
- onAfterChange
- スライドした後のコールバック
- pauseOnHover
- オートプレイ時のホバーでポーズ
- responsive
- レスポンシブの設定
- slide
- スライドするエレメントの設定
- slidesToShow
- 見せるスライドの数
- slidesToScroll
- スクロールするスライドの数
- speed
- スピードの設定
- swipe
- スワイプ操作の有無
- touchMove
- タッチ操作のスライドのモーション
- touchMoveThreshold
- タッチ操作の距離
sponsors
