実案件でよく使うスライダー系プラグイン「Slick」の使い方

ねこ

Webサイトでよく見かけるスライドとかカルーセルってどうやって作るのか知ってる?
全然知らないや!なんだか難しそうだね。

ペンギンくん

ねこ

そんなことないよ。「Slick」ってプラグインを使えば簡単に作れるんだよ。今日は「Slick」を使って、いろんなスライドを作る方法を教えるね。

コーディングのお仕事をしていると、定期的にスライドを作る機会が来ると思います。「Slick」の使い方を知っていれば、レスポンシブ対応やいろんな種類のスライドを作ることができるので、ぜひこの機会に覚えておきましょう。

Slickの導入

※2020年11月現在のバージョンです。

まずは必要なファイルをダウンロードします。
公式サイトの下の方の「Download Now」をクリック

CDNでもホスティングされているので、状況に合わせて使い分けてください。

今回使うファイル

  • slick.css
  • slick-theme.css
  • slick.min.js

「slick.css」「slick.min.js」の2つがあれば最低限、slickを動作させることができますが、slick既存の公式テーマを使う場合はさらにfonts」「ajax-loader.gif」「slick-theme.css」の3つも必要です。

ほとんどの場合は今回のように、この3つのファイルを使うことが多いと思います。(SlickはjQueryに依存したプラグインなので、jQueryの読み込みは必須

では、読み込んでおきしょう。

<!-- <head>内に追加 -->
<link rel="stylesheet" href="./css/slick.css">
<link rel="stylesheet" href="./css/slick-theme.css">

<!-- </body>手前に追加 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/slick-min.js"></script>

これでSlcikを使って、スライドを作る準備は完了です!

基本的な使い方

See the Pen Slick1 by naganosinya (@naganosinya) on CodePen.


画像を横にスライドすることができますね。
それでは、コードの説明をします。(CSSは画像のサイズを調整してるだけなので省略します。)

HTMLについて

<div class="slick-container">
	<div class="slick-img"><img src="./img/slick-img01.jpg" alt="slick画像01"></div>
	<div class="slick-img"><img src="./img/slick-img02.jpg" alt="slick画像02"></div>
	<div class="slick-img"><img src="./img/slick-img03.jpg" alt="slick画像03"></div>
</div>

大事なことは、画像をコンテナで囲ってあげること
クラス名も適当に変えてOKです。

(JavaScript)Slickのオプション設定

$('.slick-container').slick();

画像を囲っているクラスに対して、slickメソッドを使っています。必要に応じて、クラス名を変えてください。

これだけで簡単にスライドを作ることができました。ただ案件によっては、矢印ボタンやナビゲーションをつける必要があるので、その方法についても見ていきましょう。

カスタマイズ

矢印とナビゲーションを表示・カスタマイズ

See the Pen Slick by naganosinya (@naganosinya) on CodePen.

追加したオプション

$('.slick-container').slick({
  dots: true, // ドットナビを有効
  arrows: true, // 矢印ボタンを有効
});

ドットナビゲーションを表示したいときは、「dots: true」
矢印を表示したいときは「arrows: true」で表示できます。

もちろん値を「false」にすることで非表示も可能です。

追加したCSS

/* 新しい矢印を追加 */
.slick-container .slick-prev {
	background: url(https://blog.portfolionaga.me/wp-content/uploads/2020/11/arrow-prev.png) no-repeat center center / contain;;
}

/* デフォルトの矢印を無効 */
.slick-container .slick-prev::before {
	content: '';
}

/* 新しい矢印を追加 */
.slick-container .slick-next {
	background: url(https://blog.portfolionaga.me/wp-content/uploads/2020/11/arrow-next.png) no-repeat center center / contain;;
}

/* デフォルトの矢印を無効 */
.slick-container .slick-next::before {
	content: '';
}

/* ドットナビのサイズを大きく */
.slick-container .slick-dots li button::before {
	font-size: 40px;
	width: 40px;
	height: 40px;
}

矢印ボタンはデフォルトのものを無効にして、画像に置き換えています。
ドットナビは、少し大きくしています。

CSSを上書きするためには、クラスの詳細度を高めないと上書きできません。今回の場合だと、「.slick-container」と書くことでそれぞれのクラスのスタイルが優先されて、ちゃんとスタイルが適応されています。

自動で流れるスライド

左右の画像が見えるスライド

See the Pen Slick3 by naganosinya (@naganosinya) on CodePen.

追加したオプション

$('.slick-container').slick({
    centerMode: true, // 画像を中央に固定
	centerPadding: '40px', // 左右の画像の幅
	dots: true,
	arrows: true,
});

ちなみに「centerPadding」は、px以外に%などの相対値を使うこともできます。

追加したCSS

/* 左右の画像は薄くする */
.slick-img.slick-slide {
opacity: .4;
}

/* 中央の画像は元に戻す */
.slick-img.slick-slide.slick-active {
opacity: 1;
}

左右の画像を薄くすることで、中央の画像がはっきり見えるようにしました。

複数の画像を表示するスライド

See the Pen Slick4 by naganosinya (@naganosinya) on CodePen.

追加したオプション

$('.slick-container').slick({
  slidesToShow: 3,  //3枚表示する
  slidesToScroll: 1,  //1枚ずつスライドする
  dots: true,
  arrows: true,
});

「slidesToScroll」は数字を変えることで、1回でスライドできる枚数を設定できます。

サムネイル付きスライド

See the Pen Slick5 by naganosinya (@naganosinya) on CodePen.

追加したオプション

// メイン画像
$('.slick-container').slick({
  arrows: false,
  fade: false,
  asNavFor: '.slider-nav', //サムネイル画像と連動
});

// サムネイル画像
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slick-container', //メイン画像と連動
  dots: true,
  arrows: true,
  centerMode: true,
  focusOnSelect: true, //サムネイルをクリックしたらメイン画像を変更
});

「focusOnSelect」をfalseにすると、サムネイル画像をクリックしてもメイン画像がスライドされなくなります。

無限ループ

See the Pen Slick6 by naganosinya (@naganosinya) on CodePen.

追加するオプション

$('.slick-container').slick({
	autoplay: true, //自動でスライド
	autoplaySpeed: 0, //画像を止めない
	speed: 10000, // スピードをゆっくり
    variableWidth: true, // 画像の幅を均等に
	swipe: false, // 操作による切り替えはさせない
	cssEase: 'linear',  //切り替えイージングを'linear'に
    fade: false, //スライド切り替え時にフェードさせない
	arrows: false,

  // 以下、自動再生時に一時停止させない
	pauseOnFocus: false,
	pauseOnHover: false,
	pauseOnDotsHover: false,
});

レスポンシブ対応

PC、タブレット、スマホごとにスライダーの機能を変更したいときは、Slickのレスポンシブ機能を使いましょう。簡単なので実例は省きます。

オプションの例

$('.slick-box4').slick({
	centerMode: true, //センターモード
	centerPadding: '60px', //前後のパディング
	autoplay: true, //オートプレイ
	autoplaySpeed: 2000, //オートプレイの切り替わり時間
	slidesToShow: 3,

	responsive: [
   {
   //768px以下の処理
		breakpoint: 768,
		settings: {
			arrows: false, // 前後の矢印非表示
			centerMode: true,
			centerPadding: '50px',
			slidesToShow: 3
		}
   },
   {
    //480px以下の処理
		breakpoint: 480,
		settings: {
			arrows: false,
			centerMode: true,
			centerPadding: '40px',
			slidesToShow: 1
		}
	}]
});

「responsive」というオプションの中にブレイクポイントを指定して、そのブレイクポイントで機能させたいオプションを加えるだけです。

スマホだけスライドにしたい時

これはSlickで実装できないので、jQueryの「matchMedia」というメソッドを使いましょう。

if (window.matchMedia('(min-width: 576px)').matches) {
  // PC表示の時の処理
	false;
} else {
  // スマホ表示の時の処理
  $('.slick-container').slick({
    arrows: true,
    dots: true,
  });
}

これでスマホの時だけスライダーになってると思います。


逆にスライダーを解除したい場合は「unslick」メソッドを使います。

$('.slider').slick('unslick');

オプション一覧

$(selector).slick({
    //設定したいオプションを設定
});
オプション 説明 初期値
accessibility タブと矢印キーのナビゲーションを有効にするか。 true
adaptiveHeight スライダーの高さを現在のスライドの高さに設定。 false
autoplay 自動再生を有効にするか。 false
autoplaySpeed 自動再生のスライド切り替えまでの時間をミリ秒で設定。 3000
arrows スライドの左右の矢印ボタンを表示するか。 true
asNavFor スライダを他のスライダのナビゲーションに設定。クラス名かID名 null
appendArrows スライドの左右の矢印ボタンを挿入する場所を変更する。セレクタ、htmlString、配列、要素、jQueryオブジェクト $(element)
appendDots スライドのドットインジケーターを挿入する場所を変更する。セレクタ、htmlString、配列、要素、jQueryオブジェクト $(element)
prevArrow 左の矢印ボタンのHTMLをカスタマイズ。 <button type=”button” class=”slick-prev”>Previous</button>
nextArrow 右の矢印ボタンのHTMLをカスタマイズ。 <button type=”button” class=”slick-next”>Next</button>
centerMode スライドを中心に表示して部分的に前後のスライドが見えるように設定。 奇数番号のスライドに使用。 false
centerPadding センターモード時のサイドパディング。見切れるスライドの幅。’px’または’%’。 50px
cssEase CSS3アニメーションイージングを設定。 ease
customPaging dots:trueのとき、ドットをカスタマイズ。 n/a
dots ドットインジケーターを表示するか。 false
dotsClass ドットインジケーターのクラス名を設定。 slick-dots
draggable マウスでのドラッグを有効にするか。 true
fade スライダーの切り替えをスライドではなくフェイドインにするか。 false
focusOnSelect クリックでのスライド切り替えを有効にするか。 false
easing jQueryアニメーションイージングを追加。 linear
edgeFriction infinite:falseのときに最初と最後のスライドをスワイプした時のフリクション値を設定。 0.15
infinite スライドのループを有効にするか。 true
initialSlide スライドの開始番号。 0
lazyLoad 画像の遅延読み込みを設定。’ondemand’もしくは’progressive’。 ondemand
mobileFirst レスポンシブの設定でモバイルの計算を優先させる。 false
pauseOnFocus 自動再生時にスライドにフォーカスした際、自動再生をストップさせるか。 true
pauseOnHover 自動再生時にスライドにマウスオーバーした際、自動再生をストップさせるか。 true
pauseOnDotsHover 自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせるか。 false
respondTo レスポンシブの基準を設定。’window’もしくは’slider’もしくは’min’) window
responsive breakpointで設定したいブレイクポイントを設定。settingsで画面サイズがブレイクポイントで設定した範囲内になったら振り分ける処理を設定 none
rows スライドの行数を設定。slidesPerRowを使用して、各行に含めるスライドの数を設定。 1
slide スライドとして使用する要素を設定。
slidesPerRow rowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定。 1
slidesToShow 表示するスライド数を設定。 1
slidesToScroll スクロールするスライド数を設定。 1
speed スライド/フェードアニメーションの速度を設定。 300
swipe スワイプを有効にするか。 true
swipeToSlide slidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かす。 false
touchMove タッチでスライドさせるか。 true
touchThreshold スワイプでスライドさせる距離を設定。(1 / touchThreshold)*スライダの幅。 5
useCSS CSS traditionを有効にするか。 true
useTransform CSS transformを有効にするか。 true
variableWidth 可変幅のスライドにするか。(スライドの幅をバラバラにするか。) false
vertical 垂直スライドモードにするか。 false
verticalSwiping 垂直のスワイプを有効にするか。 false
rtl スライダの方向を右から左に変更するか。(right to left) false
waitForAnimate スライドアニメーション中にスライドを前後させる要求を無視するか true
zIndex スライドの重なり順。 1000