スライダープラグインの選択に困ったらもう迷うことなく「slick.js」を選びましょう!

とにかく使い方は簡単!それでいて機能はたくさんあります!

レスポンシブ対応、オートプレイ、無限ループ、Public Method、callback等スライダーとして必要な機能はほぼ実装されています。

自分も最近作るレスポンシブのwordpressの自作テーマによく使っています。

魅力的なたくさんの機能

  • レスポンシブ対応
  • CSS3はサポートブラウザ時に動作(CSS3を使用しない通常のスライドであればIE8も対応)
  • オートプレイ対応
  • ナビゲーションはドット・アローの選択が可能
  • 矢印キーでのキーボード操作
  • ドラッグ・スワイプ操作
  • 無限ループ対応
  • 画像のlazyload(遅延ロード)
  • public method
  • call back(init時/スライド前・後 等)
  • フェード機能
  • 下部にドットナビ/左右にアローナビ
  • アイテムのフィルタリング機能
  • アイテムを追加・削除
  • センターモード(メインとなるアイテムを中央に表示)
  • 縦方向のスライド
  • スライダーの同期(2つのスライダーを連携する)

わかりやすいデモ

slick.js」のサイトのデモがなんといってもとっても見やすいです。

slick.jsのDEMOを見る

1.Single Item

slick_-_the_last_carousel_you_ll_ever_need

1つずつアイテムをスライドさせる基本的な形です。

2.Multiple Items

slick_-_the_last_carousel_you_ll_ever_need

複数のアイテムを同時にカルーセル表示します。

3.Responsive Display

slick_-_the_last_carousel_you_ll_ever_need

レスポンシブ対応です。自身でブレイクサイズ・表示アイテム数を設定することが可能です。

4.Variable Width

slick_-_the_last_carousel_you_ll_ever_need

それぞれの幅が異なっているアイテムを、表示するアイテムに応じてスライドさせます。

5.Center Mode

slick_-_the_last_carousel_you_ll_ever_need

メインに表示さてたいアイテムを中央に表示させることが可能です。

6.Lazy Loading

slick_-_the_last_carousel_you_ll_ever_need

画像を遅れて読み込ませることが可能です。具体的には、ユーザーがスクロールをして、目的の画像が画面内に映るタイミングで、初めて読み込みを実行します。適切なタイミングで画像を読み込ませ、転送量の節約、ページの表示速度を向上させます。

7.Add & Remove

slick_-_the_last_carousel_you_ll_ever_need

ユーザーがアイテムを追加・削除することができます。

8.Filtering

slick_-_the_last_carousel_you_ll_ever_need

アイテムのフィルタリング機能も実装可能です。指定のアイテムを表示/非表示の切り替えることができます。

 9.Slider Syncing

slick_-_the_last_carousel_you_ll_ever_need

2つのスライダーを連携させることが可能です。図のスライダーでは、下のスライダーがサムネイルナビの働きをし、クリックすることで上のスライダーも表示が切り変わります。

 

slick.jsの使い方

ステップ1. プラグインのダウンロード

「slick.js」のサイトよりプラグインのダウンロードをします。

ステップ2. css,jsの読み込み

head内にスタイルシート「slick.css」、の上あたりにjquery.jsとスクリプト「slick.min.js」を配置します。
CSS・JSの読み込み

<link rel="stylesheet" href="common/css/slick.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="common/js/slick.min.js"></script>

ステップ3. HTML

カルーセルスライダーで表示する要素をdivなどで内包します。
各パネルはデフォルトでdiv要素になっており、変更も可能です

<div class="slide_selector">
 <div>
  <!-- スライドの中身1 -->
 </div>
 <div>
  <!-- スライドの中身2 -->
 </div>
</div>

ステップ4. JavaScript

Scriptの読み込み

$('.slide_selector').slick({
  slidesToShow: 4, //スライドが見える数
  slidesToScroll: 1, //スライドがスクロールする数
  infinite: true, //無限スクロール
  draggable: false //マウスドラッグでのスクロール
 });

その他 オプション設定一覧

オプション名 デフォルト 説明
accessibility bool true 左右のナビゲーションの有効/無効
autoplay bool false オートプレイの有効/無効
autoplaySpeed int 3000 スライドが切り替わる時間(ms)
cssEase string ‘ease’ CSS3でのアニメーション
(ease,linear,ease-in,ease-out,ease-in-out)
dots bool false カレント表示のナビゲーション
dotsClass string ‘slick-dots’ カレント表示のナビゲーションのクラス名
draggable bool true ドラッグの有効/無効
easing string ‘linear’ jQueryのanimate()でのアニメーションタイプ
fade bool false フェードインでの表示の有効/無効
arrows bool true 前へ/次へナビゲーションの有効/無効
appendArrows string $(element) 前へ/次へナビをカスタムで追加する
appendDots string $(element) カレント表示ナビをカスタムで追加する
prevArrow html html buttonタグ 前へボタンをカスタムする
nextArrow html html buttonタグ 次へボタンをカスタムする
infinite bool true 無限ループの有効/無効
initialSlide int 0 最初のスライド位置
lazyLoad string ‘ondemand’ 画像の遅延ロード
onBeforeChange(this, currentIndex,targetIndex) method null メソッド スライドする前に実行
onAfterChange(this, index) method null メソッド スライドした後に実行
onInit(this) method null メソッド 初期化した際に実行
onReInit(this) method null メソッド 初期化メソッドを実行した後にこちらのメソッドが実行
pauseOnHover bool true スライドにホバーした際に自動再生を止める 有効/無効
responsive obj null どの時点でレスポンシブ表示するかのブレークポイントを設定
slide string div スライドする要素を変更
slidesToShow int 1  いくつスライドが見えている状態にするか
slidesToScroll int 1 スライドする数
speed int 300 スライドアニメーションの時間(ms)
swipe bool true タッチスワイプの有効/無効
swipeToSlide bool false スライドする数に関係なくスワイプの有効/無効
touchMove bool true タッチでスライドの有効/無効
useCSS bool true CSS Transitionsの有効/無効
vertical bool false 縦方向のスライドの有効/無効
rtl bool false 右から左へスライド方向の変更の有効/無効