世の中にはたくさんのスライダープラグインがありますが、今回はレスポンシブ・タッチデバイスに対応、オプション設定も豊富なスライダープラグイン「slick」の使い方を詳しく解説していきます。
 

slickの機能概要

• レスポンシブ対応
• ブレークポイントごとに別々の設定が可能
• スワイプ・マウスドラッグ可能
• 無限ループ
• スライドの追加、削除、フィルタリング、除外など

導入

ファイルのダウンロード

まずは公式サイトからファイルをダウンロードします。

kenwheeler.github.io

 

2 Posts

3622 Shares

463 Users

6118 Pockets

http://kenwheeler.github.io/slick/

または、以前紹介した「jsDelivr」というサイトにもCDNでホストされています。
（ちなみに2017年11月時点ではslickが1位です。）

jsDelivrの使い方はこちらの記事をチェックしてみてください。

webdesignday.jp

 

1 Share

13 Pockets

【jQuery】CDNならこのサイトが超便利！jsDelivrの使い方

前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。jsDelivr&nbs...

設置するファイル

• ajax-loader.gif
• fonts（フォルダ）
• slick-theme.css
• slick.css
• slick.min.js

HTML

<link href="js/slick-theme.css" rel="stylesheet" type="text/css">
<link href="js/slick.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>

CSSファイルの後にslickを設置します。jQuery本体を設置するのも忘れずに。
 

slickの基本な使い方

HTML

<ul class="slider">
    <li><a href="#"><img src="images/01.jpg" alt="image01"></a></li>
    <li><a href="#"><img src="images/02.jpg" alt="image02"></a></li>
    <li><a href="#"><img src="images/03.jpg" alt="image03"></a></li>
    <li><a href="#"><img src="images/04.jpg" alt="image04"></a></li>
    <li><a href="#"><img src="images/05.jpg" alt="image05"></a></li>
    <li><a href="#"><img src="images/06.jpg" alt="image06"></a></li>
    <li><a href="#"><img src="images/07.jpg" alt="image07"></a></li>
    <li><a href="#"><img src="images/08.jpg" alt="image08"></a></li>
</ul>

「slider」クラスにスライドを設定していきます。
 

jQuery

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

基本的なスライダーならたったこの1行です。
 

オプションを設定しないとあまりにあれなんで代表的なオプションを設定していきます。

$('.slider').slick({
	autoplay:true,
	autoplaySpeed:5000,
	dots:true,
});

1行目　「autoplay」で自動再生を設定
2行目　「autoplaySpeed」で自動再生のスライド切り替えの時間を設定
3行目　「dots」でインジケーターを表示
 

CSS

.slider{
    margin: 100px auto;
    width: 80%;
}
.slider img{
	height: auto;
	width: 100%;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}

12行目　左右の矢印ボタンはアイコンフォントになっていて、しかもフォントカラーが白になっています。サイトが白背景だと「ボタンがない!」と焦ることになります。なのでわかりやすく黒にしました。

カスタマイズ

基本はできましたので、ここから色々やってみましょう。
最後の方に載せますが、ものすごい数のオプションがあります。全てをやっていくと大変なことになるので、代表的な設定でカスタマイズしていきます。
 

複数の画像を表示

jQuery

$('.slider').slick({
	autoplay:true,
	autoplaySpeed:5000,
	dots:true,
	slidesToShow:2,
	slidesToScroll:2
});

5行目　「slidesToShow」で表示するスライドの数を設定します。
6行目　「 slidesToScroll 」で一度にスクロールするスライドの数も設定できます。

サムネイル付き

HTML

<ul class="slider">
	<li><a href="#"><img src="images/01.jpg" alt="image01"></a></li>
	<li><a href="#"><img src="images/02.jpg" alt="image02"></a></li>
	<li><a href="#"><img src="images/03.jpg" alt="image03"></a></li>
	<li><a href="#"><img src="images/04.jpg" alt="image04"></a></li>
	<li><a href="#"><img src="images/05.jpg" alt="image05"></a></li>
	<li><a href="#"><img src="images/06.jpg" alt="image06"></a></li>
	<li><a href="#"><img src="images/07.jpg" alt="image07"></a></li>
	<li><a href="#"><img src="images/08.jpg" alt="image08"></a></li>
</ul>
<ul class="thumb">
	<li><a href="#"><img src="images/01.jpg" alt="image01"></a></li>
	<li><a href="#"><img src="images/02.jpg" alt="image02"></a></li>
	<li><a href="#"><img src="images/03.jpg" alt="image03"></a></li>
	<li><a href="#"><img src="images/04.jpg" alt="image04"></a></li>
	<li><a href="#"><img src="images/05.jpg" alt="image05"></a></li>
	<li><a href="#"><img src="images/06.jpg" alt="image06"></a></li>
	<li><a href="#"><img src="images/07.jpg" alt="image07"></a></li>
	<li><a href="#"><img src="images/08.jpg" alt="image08"></a></li>
</ul>

サムネイル用に「thumb」というリストを追加しました。
 

jQuery

$('.slider').slick({
    arrows:false,
    asNavFor:'.thumb',
});
$('.thumb').slick({
    asNavFor:'.slider',
    focusOnSelect: true,
    slidesToShow:4,
    slidesToScroll:1
});    

3,6行目　サムネイル付きスライダーのポイントは「asNavFor」で本体とサムネイルをリンクさせることです。

7行目　サムネイル画像をクリックして本体をスライドさせたい場合はサムネイルに「focusOnSelect：true」を設定します。

センターモード

jQuery

$('.slider').slick({
	centerMode: true,
	centerPadding: '100px',
	dots:true,
	focusOnSelect:true,
});

2行目　「centerMode」をtrueに設定するとセンターモードになります。
3行目　また「centerPadding」で両端の見切れるスライドの幅をピクセルで指定できます。
ちなみに、センターモード時は「slidesToshow」に1以上を設定しても1になります。

レスポンシブ

jQuery

$('.slider').slick({
	autoplay:true,
	autoplaySpeed:5000,
	dots:true,
	slidesToShow:4,
	responsive:[
		{
			breakpoint: 1024,
			settings:{
				slidesToShow:3,
			}
		},
		{
			breakpoint: 768,
			settings:{
				slidesToShow:2,
			}
		},
		{
			breakpoint: 480,
			settings:{
				slidesToShow:1,
			}
		},
	]
});

6行目　「responsive」で設定していきます。「responsive」は配列になっています。
8,14,20行目　「responsive」の配列の中に、「breakpoint」で設定したいブレイクポイントを設定していきます。
9,15,21行目　「settings」で画面サイズがブレイクポイントで設定した範囲内になったら振り分ける処理を設定します。

「responsive」は他よりとっつきにくい印象がありますが、覚えてしまうとすごく便利なオプションです。

ブラウザの幅を狭くしていくと、設定したブレイクポイントでスライドの数が変わります。
 

画像遅延読み込み

ロード時に画像を全て読み込まないように設定できます。スライドするタイミングで読み込みますので、画像のファイルサイズが大きい場合に有効です。

HTML

    <ul class="slider">
        <li><a href="#"><img data-lazy="images/01.jpg" alt="image01"></a></li>
        <li><a href="#"><img data-lazy="images/02.jpg" alt="image02"></a></li>
        <li><a href="#"><img data-lazy="images/03.jpg" alt="image03"></a></li>
        <li><a href="#"><img data-lazy="images/04.jpg" alt="image04"></a></li>
    </ul>

こちらはオプションではなく、画像の「src」属性の変わりに「data-lazy」属性に画像のパスを設定します。
（画像のファイルサイズを大きめにしています。）
 

画像遅延読み込みなし

画像遅延読み込みあり

あまり違いはわからないと思いますが、読み込まれたファイルを見ると「画像遅延読み込みなし」は01〜04.jpgまで全て読み込むのに対して、「画像遅延読み込みあり」は01.jpgのみとなっています。
 

読み込み完了後に表示する

先ほど同様、画像のファイルサイズが大きい場合、最初に崩れた表示になってしまい、少し遅れて正常に表示される場合があります。カッコ悪いので読み込みが完了してから表示するようにします。

slickは読み込みが完了すると「slick-initialized」というクラスをつけてくれるのでこれを利用します。

CSS

.slider{
    margin: 100px auto;
    width: 80%;
    opacity: 0;
    transition: 3s;
}
.slick-initialized{
	opacity: 1
}

4行目　「slider」に「opacity: 0;」を設定して表示されないようにします。
5行目　わかりやすいように「 transition: 3s;」で3秒かけてアニメーションするようにしました。
8行目　読み込み完了後に付与される「slick-initialized」に「opacity: 1」を設定して表示します。
 

オプション

オプションの設定は下記になります。

$(selector).slick({
	//設定したいオプションを設定
});

イベント

イベントの取得のやり方は下記になります。

$(selector).on('eventname',function(){
    //行いたい処理
});

「init」、「afterChange」、「beforeChange」を使ってサンプル作成しました。スライドの中にテキストを入れてアニメーションさせるよく見るやつです。

HTML

<ul class="slider">
	<li class="slide">
		<a class="slide__link" href="#">
			<img src="images/01.jpg" alt="image01">
			<span class="slide__content-wrap">
				<span class="slide__content">
					<h2 class="slide__title">slider1 text here!</h2>
					<p class="slide__text">
					Lorem ipsum dolor sit amet, 以下省略		
					</p>
				</span>
			</span>
		</a>
	</li>
	<!--以下省略-->
</ul>

6行目　「slide__content」に「on」クラスをつけたり外したりしてアニメーションさせます。
 

CSS

.slider{
    margin: 100px auto;
    width: 80%;
}
.slide{
	position: relative;
}
.slide__link{
	color: #fff;
	text-align: center;
}
.slide img{
	height: auto;
	width: 100%;
}
.slide__content-wrap{
	left: 50%;
	position: absolute;
	top: 50%;
}
.slide__content{
	display: block;
	opacity: 0;
	transform: translate(-50%,20%);
	transition: 0s;
}
.slide__content.on{
	opacity: 1;
	transform: translate(-50%,-50%);
	transition: .5s;
}
.slide__title{
	font-size: 48px;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before{
    color: #000;
}

21行目　「.slide__content」を「opacity: 0;」で見えなくしておきます。また、transform: translate(-50%,20%);で下に移動しておきます。
27行目　jQueryで「.slide__content」に「on」クラスを付与し、「opacity」と「transform」をアニメーションさせます。
 

jQuery

$('.slider').on('init',function(){
	$('.slide__content').addClass('on');
});		
$('.slider').slick({
	autoplay:true,
	autoplaySpeed:5000,
	dots:true,
});
$('.slider').on('beforeChange',function(){
	$('.slide__content').removeClass('on');
});	
$('.slider').on('afterChange',function(){
	$('.slide__content').addClass('on');
});	

9行目　「beforeChange」でスライドが移動する前に「on」クラスを削除。
12行目　「afterChange」でスライドが移動が完了したら「on」クラスを付与。

1行目　これだけだとロード時に最初のスライドのテキストがアニメーションしません。ですので「init」でスライダーが初期化されたタイミングでも「on」クラスを付与します。

「init」のイベント取得で注意しないとならないのは$(‘.slider’).slick()」の前で書かないと取得できないという点です。
 

メソッド

メソッドを使用したサンプルです。

slickCurrentSlide

現在のスライドインデックスを取得

$('.button').on('click',function(){
	console.log($('.slider').slick('slickCurrentSlide'));
});

slickGoTo

指定したスライドへ移動

$('.button').on('click',function(){
	$('.slider').slick('slickGoTo',2);
});

slickNext

次のスライドへ移動

$('.button').on('click',function(){
	$('.slider').slick('slickNext');
});

slickPrev

前のスライドへ移動

$('.button').on('click',function(){
	$('.slider').slick('slickPrev');
});

slickPause

スライドの自動再生を一時停止

$('.button').on('click',function(){
	$('.slider').slick('slickPause');
});

slickPlay

スライドの自動再生を再開

$('.button').on('click',function(){
	$('.slider').slick('slickPlay');
});

slickAdd

スライドを追加。インデックスの指定がない場合は末尾へ。インデックス(n)を指定した場合はn番目へ。addBeforeが設定されている場合は前に追加されます。

先頭にスライドを追加

$('.button').on('click',function(){
	$('.slider').slick('slickAdd', '<li>追加スライド</li>',0,'addBefore');
});

末尾にスライドを追加

$('.button').on('click',function(){
	$('.slider').slick('slickAdd', '<li>追加スライド</li>');
});

2番目の後にスライドを追加（0から数えて2番目の後）

$('.button').on('click',function(){
	$('.slider').slick('slickAdd', '<li>追加スライド</li>',2);
});

2番目の前にスライドを追加（0から数えて2番目の前）

$('.button').on('click',function(){
	$('.slider').slick('slickAdd', '<li>追加スライド</li>',n,'addBefore');
});

slickRemove

スライドを削除。インデックスの指定をしない場合は、removeBefore（true/false）で先頭（true）か末尾（末尾)を削除。インデックス(n)を指定した場合はn番目を削除。removeBefore（true）が設定されている場合は前のスライドを削除。

先頭のスライドを削除

$('.button').on('click',function(){
	$('.slider').slick('slickRemove',true);
});

末尾のスライドを削除

$('.button').on('click',function(){
	$('.slider').slick('slickRemove',false);
});

2番目のスライドを削除（0から数えて2番目）

$('.button').on('click',function(){
	$('.slider').slick('slickRemove',2);
});

2番目の前のスライドを削除（0から数えて2番目の前）

$('.button').on('click',function(){
	$('.slider').slick('slickRemove',2,true);
});

slickFilter

jQueryのfilterを使用してスライドをフィルタリング

奇数のスライドを表示

$('.button').on('click',function(){
	$('.slider').slick('slickFilter',':odd');
});

.filterクラスのスライドだけ表示

$('.button').on('click',function(){
	$('.slider').slick('slickFilter','.filter');
});

slickUnfilter

適用されたフィルタリングを解除

$('.button').on('click',function(){
	$('.slider').slick('slickUnfilter');
});

slickGetOption

指定したオプションの値を取得

$('.button').on('click',function(){
	console.log($('.slider').slick('slickGetOption','autoplay'));
});

slickSetOption

指定したオプション値を設定（第4引数をtrueにするとリアルタイムに反映）

$('.button').on('click',function(){
	$('.slider').slick('slickSetOption','autoplay',false,true);
});

unslick

スライダーを解除

$('.button').on('click',function(){
	$('.slider').slick('unslick');
});

getSlick

スライダーを取得

$('.button').on('click',function(){
	console.log($('.slider').slick('getSlick'));
});

それでは良いWEBデザイン日和を！Have a nice WEBDESIGNDAY!