[JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ! -slick

画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示するカルーセルのスクリプトを紹介します。

自由度の高いカルーセルってなかなか無いのですが、「ラスト カルーセル」とサブタイトルがついてるくらい探し回って最後にたどり着くのはこれという出来です。

サイトのキャプチャ

slick
slick -GitHub

slickの特徴

「the last carousel」とあるだけあって、カルーセルとしての機能は全て備えています。

  • レスポンシブ対応
  • CSS3はサポートブラウザ時に動作
  • オートプレイ対応
  • ナビゲーションはドット・アローの選択が可能
  • 矢印キーでのキーボード操作に対応
  • ドラッグ・スワイプ操作に対応
  • 無限ループ対応

slickのデモ

デモでは、さまざまなカルーセルの動きを試せます。

デモのキャプチャ

demo -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
タッチ操作の距離

top of page

©2017 coliss