制作のご相談はこちら
【jQuery】レスポンシブ対応のカルーセルは「slick」がおすすめ

2017年11月21日

【jQuery】レスポンシブ対応のカルーセルは「slick」がおすすめ

サイトでよく見るスライダーやカルーセルですが、よく使うパーツなので常に使うプラグインを1つ決めておきたいものです。
そこでおすすめなのが「slick」というプラグインです。
(サブタイトルに”あなたが必要とする最後のカルーセル”と謳っているほどです)
シンプルでカスタマイズしやすく、スマホのスワイプ操作の対応もしているのでレスポンシブデザインには持ってこいです。

カルーセルとは? スライダー、クロスフェードとの違いは?

カルーセルというのはグループ化されている画像やテキストなどの情報をスライドなどで表示させる表現手法です。
carousel(カルーセル)は日本語で「回転木馬」という意味のようです。

よく「スライダー」や「クロスフェード」などというワードがありますが、
内容の移し方(スライドさせるのか、フェードさせるのか…)の違いだけなので、カルーセルとほぼ同じ意味と考えていいと思います。
クロスフェードの作り方はこちら

使い方

まずslickからデータ一式をダウンロードしてください。
ページ下にある「Download Now」のボタンかGithubからダウンロードできます。

外部ファイルの設置

<head>
// headタグ内にslick.cssを追加
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

// デフォルトのスタイリングをしたい場合は、新しいslick-theme.cssを追加
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>

<body>
// 閉じるbodyタグの前、jQueryの後にslick.jsを追加(jQuery 1.7 +が必要)
~
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
</body>

外部ファイルのディレクトリ指定はそれぞれ変更してください。

HTML

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

「your content」の部分にそれぞれスライドの内容を入れてください。

Javascript

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

スクリプトファイルまたはインラインスクリプトタグでスライダを初期化します。
そしてオプション設定もこちらで行います。

オプション設定

accessibility 矢印キーのナビゲーションの有無
autoplay 自動再生の有無
autoplaySpeed 自動再生のスピード
arrows 左右の矢印ナビゲーションの有無
cssEase CSS3アニメーションの設定
dots 下部のドットナビゲーションの有無
draggable マウスドラッグの有無
fade フェードの有無
easing イージングの設定
infinite 無限ループの有無
lazyLoad 読み込みの設定
onBeforeChange スライドする前のコールバック
onAfterChange スライドした後のコールバック
pauseOnHover 自動再生時のホバーでポーズ
responsive レスポンシブの設定
slide スライドするエレメントの設定
slidesToShow 表示するスライド数
slidesToScroll スクロールするスライド数
speed スライド/フェードアニメーションの速度
swipe スワイプの有無
vertical 縦方向へのスライド
touchMove タッチでスライドモーションを有効にする

WordPressのプラグイン対応もしているようです。
Slick Slider WordPress – MaxGalleria