スライダープラグインの王道「slick」でスライダーを実装する方法

ひぐま
ひぐま

slickって何？

slickは何かとカスタマイズできるオプションが豊富にあり、設置もそれほど難しくないので便利なスライダー系のプラグインです。
slickは弊社の制作物をはじめ、いろいろなサイトで運用されています。
有名なプラグインですので、WEBサイトの制作をしている人なら1度は耳にしたことがあるのではないでしょうか？

今回はそんな、スライダー系のプラグインとして最も有名な「slick」でのスライダーの実装法をご紹介します。

用意するもの

まず、下記よりslickの公式サイトへアクセスします。

slick公式サイト

メニューの「get it now」をクリックし、「Download Now」からslickのzipファイルをダウンロードします。

zipファイルの解凍後、slick-1.8.1(今回使用のバージョン)のslickの中にある、

  1. fontsフォルダー
  2. ajax-loader.gif
  3. slick.css
  4. slick-theme.css
  5. slick.min.js

上記をすべて取り出し、HTMLへファイルを呼び込みます。

※fontsフォルダー,ajax-loader.gifはCSSファイルと同階層に置いてください。

記述例

<head>
  <link rel="stylesheet" href="css/slick/slick.css">
  <link rel="stylesheet" href="css/slick/slick-theme.css">
  <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">//後述のカスタマイズで「Awsome Fonts」を使用しない場合はいりません
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/slick/slick.min.js"></script>
</head>

※ファイルのパスはご自身のファイル階層に応じて変えてください。

※jQueryも忘れず設置し、呼び出したjsファイルの一番上に記載してくださいね。

※スライダーが動かない時はだいたい、上記が主な原因だったりするので、ご注意ください。

HTML

ファイルを全部呼び込めましたら、スライダー部分のソースを書いていきましょう。
今回使用するHTMLはこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
～省略～
</head> 
<body>
	<main>
		<div>
			<ul class="slider">
				<li><img src="img/slick/slider01.jpg" alt="フランス"></li>
				<li><img src="img/slick/slider02.jpg" alt="イギリス"></li>
				<li><img src="img/slick/slider03.jpg" alt="花火"></li>
				<li><img src="img/slick/slider04.jpg" alt="パンジー"></li>
				<li><img src="img/slick/slider05.jpg" alt="わんちゃん"></li>
			</ul>
			<section>
				<h2>旅行に行きたい</h2>
				<p>近場でいいから旅行に行きたい</p>
			</section>
		</div>
	</main>
</body>
</html>

スライダーのコンテナとなる箇所にクラスやidをつけます。
今回は「slider」というクラスをulにつけています。

今回はスライダーの上に文字を載せたいと思うのでさらにスライダーと文字部分をdivで包含していますが、スライダーだけの場合はul部分だけあればOKです。

ベースとなるHTMLができたら、slickにはオプションが豊富にあるのでいろいろと調整してみましょう。

オプションの指定方法

$('.slider').slick({
	指定オプション:値,
	指定オプション:値
});

このように、$('.slider').slick({～});の間へオプションを書き記していきます。
※指定オプションと指定オプションの間にカンマ","を挟まないとスライダーが動作しない原因となりますのでご注意ください。

オプションをすべて説明していくのは時間がかかりますので、よく使うものを中心に最低限のシンプルな形のものと、いろいろとカスタマイズしたものを分けてご説明します。

シンプルに実装する場合

スクリプト

<script type="text/javascript">
    $(function(){    
        $('.slider').slick({
            autoplay:true,//自動再生する
            autoplaySpeed:4000,//自動再生するスピード 4秒
            dots:true//ドット部分を表示する
        });
    });
</script>

CSS

/*==// スライダーと文字のwrap //==*/
main > div{ position:relative; }
/*==// 上に載せる文字部分 //==*/
main > div section{
	color:#fff;
	position:absolute;
	/*上下中央に文字配置*/
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	left:10%;
}
main > div section h2{ margin-bottom:15px; font-size:30px; font-size:3rem; }
main > div section p{ font-size:18px; font-size:1.8rem; }
/*===================================
 スライダーの指定だけならここから下だけでOK
===================================*/
/*==// スライダーのコンテナ //==*/
main .slider{
		padding-top:46px;/*戻るボタンの高さ分あけてます*/
		width:100%;/* スライダーの幅を指定*/
		list-style:none;
	}
/*==//  ここから矢印  //==*/
.slick-arrow{ z-index:100; }
.slick-next{ right:10px;}/*内側に右から10ピクセル移動*/
.slick-prev{ left:10px; }/*内側に左から10ピクセル移動*/

シンプルに行くなら、スライダーのCSSはpositionで矢印の重ね順などを調整したら終わりです。

上記は矢印のデフォルトが白なので画像の上に移動させてますが、 いらなければ見やすい色へ変更するだけでも問題ないと思います。

.slick-arrow::before{ color:#000;/*黒*/ }

いろいろカスタマイズした場合

スクリプト

<script type="text/javascript">
$(function(){
    $('.slider').slick({
        autoplay:true,//自動再生する
        autoplaySpeed:4000,//自動再生するスピード 4秒
        dots:true,//ドット部分を表示する
        infinite:true,//無限にスライドする
        fade:true,//フェードする
        speed:500,//フェードするスピード 0.5秒
        prevArrow:'<p class="slide-arrow prev-arrow"></p>',//矢印左
        nextArrow:'<p class="slide-arrow next-arrow"></p>'//矢印右
    });
});
</script>

CSS

/*==// スライダーと文字のwrap //==*/
main > div{ position:relative; }
/*==// 上に載せる文字部分 //==*/
main > div section{
	color:#fff;
	position:absolute;
	/*上下中央に文字配置*/
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	left:10%;
}
main > div section h2{ margin-bottom:15px; font-size:30px; font-size:3rem; }
main > div section p{ font-size:18px; font-size:1.8rem; }
/*==// スライダーのコンテナ //==*/
main .slider{
		padding-top:46px;/*戻るボタンの高さ分あけてます*/
		width:100%;/* スライダーの幅を指定*/
		list-style:none;
	}
/*==// ここから矢印 //==*/
.slide-arrow{
	position:absolute;
	/*上下中央に矢印配置*/
	top:50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	z-index:100;
	cursor:pointer;/*ポインター表示にし、クリック可能なことを視覚的にわかりやすくします*/
}
.slide-arrow::before{
	display:block;
	color:#fff;
	font-size:30px;
	font-weight:900;
	font-family:"Font Awesome 5 Free";
}
.next-arrow{ right:10px; }/*内側に右から10ピクセル移動*/
.prev-arrow{ left:10px; }/*内側に左から10ピクセル移動*/
.next-arrow::before{
	content:"\f054";/*右矢印のアイコンフォント*/
}
.prev-arrow::before{
	content:"\f053";/*左矢印アイコンフォント*/
}
/*マウスオーバーで矢印が水色へ*/
.slide-arrow:hover::before{
	color:#11cfff;
}
/*==// ここからdots //==*/
.slick-dots{
	/*画像の下部へ配置*/
	position:absolute;
	bottom:0;
	z-index:100;
}
.slick-dots li button:before{
	color:#fff;
	opacity:1;
}
.slick-dots li.slick-active button:before{ color:#11cfff; opacity:1; }

矢印の部分でFont Awesomeフリー版のアイコンフォントをお借りしてます。

Font Awesome

dotsはデフォルトで画像の下に離れて配置されてしまうのですが、カスタマイズ版では画像に重なる形で下部に配置されるように調整してます。

デフォルトだとこんな感じ↓

slick01.jpg

.slick-dots li button:beforeは一つ一つのdots部分です。
色を黒から白へ変更し、透明でちょっと見づらいのでデフォルトの[opacity:7.5;」から「opacity:1;」にすることで不透明にしてます。

.slick-dots li.slick-active button:beforeは現在表示されている部分のdotsになります。
カラーを水色へ変更しました。

実際のデモ(カスタマイズ版)は下記から確認できます。

デモ

追記：自動再生が止まってしまう場合

はまりそうな項目があったので追記です。

自動再生(autoplay:true)にしてるのになんかスライダーが進みませんが...？ という場合、
スライダーの上にマウスカーソル乗せて画面を見てませんか？

    pauseOnHover: false,//再生時マウスオーバーで一時停止させない
    pauseOnFocus: false,//再生時フォーカスで一時停止させない
    pauseOnDotsHover: false//マウスオーバーでドットを一時停止させない

デモではデフォルトのtrue(一時停止させる)になってますので、マウスオーバーしても止めたくないよ！という方はこちらをスライダーのオプション欄に追記ください。

どうでしたでしょうか。

jQueryがなくても動作するスライダーのプラグイン「Swiper」での実装法についても以前に記事を書いていますので
よろしければこちらもチェックしてくださいね。

【jQuery非依存】「swiper」でカルーセルスライダーを実装する

関連記事