Zenn
🔰

Slickでかんたんカルーセル

2021/12/19に公開
JavaScript
初心者
初心者向け
カルーセル
tech

Slickとは!?

Slickを利用することで、お手軽にカルーセルを実装することができます。

Slick

今回は、このライブラリを利用して簡単にカルーセルを作ってみます。

Image by Ilona Ilyés from Pixabay

プロジェクトを用意する

次の様にプロジェクトを作ります。

MyProject01/
　├ custom.css (スタイルシートを記述するファイルです)
　├ index.html (プログラムを起動するファイルです)
　├ main.js (メインのプログラムを記述するファイルです)
　├ images (png画像を保存するフォルダです)
　｜　├ photo01.png
　｜　├ photo02.png
　｜　├ photo03.png
　｜　├ photo04.png
　｜　├ photo05.png

HTMLファイルを用意する

では、作っていきましょう。
HTMLファイルを用意して、下記コードを記述します。

index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<!-- CSS -->
	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
	<link rel="stylesheet" href="./custom.css"/>
	<!-- JavaScript -->
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
	<script src="./main.js" defer></script>
</head>
<body>
	<!-- Slick -->
	<div class="my-slick">
		<div>
			<a href="#"><img src="./images/photo01.png"/></a>
		</div>
		<div>
			<a href="#"><img src="./images/photo02.png"/></a>
		</div>
		<div>
			<a href="#"><img src="./images/photo03.png"/></a>
		</div>
		<div>
			<a href="#"><img src="./images/photo04.png"/></a>
		</div>
		<div>
			<a href="#"><img src="./images/photo05.png"/></a>
		</div>
	</div>
	<!-- Credit -->
	<p>
	Image by <a href="https://pixabay.com/users/ilyessuti-3558510/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2948404">Ilona Ilyés</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2948404">Pixabay</a>
	</p>
</body>
</html>

Slickで必要なファイルはCDNを利用して読み込んでいます。

index.html(CSSファイル)
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
index.html(ライブラリ本体)
<!-- JavaScript -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

そして、カルーセルをさせたい部分にクラス名(ここでは"my-slick"としました)を付けておきます。

index.html(カルーセル部分)
<!-- Slick -->
<div class="my-slick">
	<div>
		<a href="#"><img src="./images/photo01.png"/></a>
	</div>
	<!-- 省略 -->
</div>

CSSファイルを用意する

次はCSSファイルです。

custom.css
/* CSS */
body{
	text-align: center;
}

.my-slick{
	width: 90%; height: auto;/* Slickのサイズ */
	margin: auto; padding: 0px;
	background-color: silver;
}

.my-slick img{
	width: 240px; height: 160px;/* 画像のサイズ */
}

.slick-prev:before,
.slick-next:before{
	color: black;
}

クラス名".my-slick"では、カルーセル全体の横幅(ここでは90%としました)を指定しています。
そして".my-slick img"では、画像それぞれのサイズを指定しています。

JavaScriptファイルを用意する

最後はメインの処理です。(驚くほどシンプルです!!)

main.js
console.log("custom.js!!");

window.onload = (e)=>{
	console.log("onload!!");

	$(".my-slick").slick({
		dots: true,
		centerMode: true,
		slidesToShow: 3,
		slidesToScroll: 1
	});
}

カルーセルで指定したクラス名".my-slick"エレメントに対して、"slick()"を実行するだけです。(これだけですね!!)

引数として、カルーセルに対する様々なオプションを指定することができます。
ここでは、次の様にオプションを指定しています。

オプション名 意味 初期値
dots カルーセル下部にある点 false
centerMode 表示する内容を中央に false
slideToShow 一度に表示する枚数 1
slideToScroll 一度にスライドする枚数 1

他にも様々なオプションが用意されているので、
公式サイトを参考にして色々試してみましょう。

これだけで簡単にカルーセルを実装することができます。(やりました!!)

最後に

駆け足ではありましたが、Slickを利用した簡単なサンプルを実装してみました。
思った以上に簡単に出来ることが伝われば幸いです。
ここまで読んでいただき有難うございました。

Discussion