今回はJavaScriptのスライダーライブラリ「Slick」を使って、自動で切り替わるサムネイル付きスライドをWEBサイトに表示する方法をご紹介します。
目次
サムネイル付きスライドの完成イメージ
メインのスライドが自動で切り替わり、それに連動してサムネイルスライドもアクティブな状態が切り替わる仕組みです。
サムネイルをクリックすると、メインスライドも切り替わります。
必要なコード(全体)
まずは、すべてのコードをまとめてご紹介します。
<html>
<head>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
/>
<style>
.main {
height: 400px;
}
.thumbnail {
height: 100px;
}
.slide1 {
background-color: #ff7f7f;
}
.slide2 {
background-color: #ff7fff;
}
.slide3 {
background-color: #7f7fff;
}
.slide4 {
background-color: #7fffff;
}
.slide5 {
background-color: #7fff7f;
}
.slide6 {
background-color: #ffff7f;
}
.thumbnail .slick-slide {
opacity: 0.5;
cursor: pointer;
}
.thumbnail .slick-current {
opacity: 1;
}
</style>
</head>
<body>
<script
type="text/javascript"
src="https://code.jquery.com/jquery-1.11.0.min.js"
></script>
<script
type="text/javascript"
src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
></script>
<div class="wrap-content">
<div class="main">
<div class="slide1">スライド1</div>
<div class="slide2">スライド2</div>
<div class="slide3">スライド3</div>
<div class="slide4">スライド4</div>
<div class="slide5">スライド5</div>
<div class="slide6">スライド6</div>
</div>
<div class="thumbnail">
<div class="slide1">スライド1</div>
<div class="slide2">スライド2</div>
<div class="slide3">スライド3</div>
<div class="slide4">スライド4</div>
<div class="slide5">スライド5</div>
<div class="slide6">スライド6</div>
</div>
</div>
<script>
jQuery(document).ready(function () {
jQuery(".main").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: ".thumbnail",
autoplay: true,
autoplaySpeed: 2000,
});
jQuery(".thumbnail").slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: ".main",
centerMode: true,
focusOnSelect: true,
});
});
</script>
</body>
</html>各コードの解説
jQueryを読み込む
Slickを利用するにはjQueryが必要なので、それをCDNにて読み込みます。
<script
type="text/javascript"
src="https://code.jquery.com/jquery-1.11.0.min.js"
></script>
<script
type="text/javascript"
src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"
></script>Slickを読み込む
CDNを利用してSlickを読み込みます。
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
/> <script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
></script>スライドのHTMLを構築する
スライドの基本的なHTMLを構築します。
今回は6枚のスライドとして、メインスライドとサムネイルスライドで同じ内容を用意します。
<div class="wrap-content">
<div class="main">
<div class="slide1">スライド1</div>
<div class="slide2">スライド2</div>
<div class="slide3">スライド3</div>
<div class="slide4">スライド4</div>
<div class="slide5">スライド5</div>
<div class="slide6">スライド6</div>
</div>
<div class="thumbnail">
<div class="slide1">スライド1</div>
<div class="slide2">スライド2</div>
<div class="slide3">スライド3</div>
<div class="slide4">スライド4</div>
<div class="slide5">スライド5</div>
<div class="slide6">スライド6</div>
</div>
</div>メインスライドとサムネイルスライドを区別するためのクラス（main、thumbnail）をそれぞれ追加しています。
CSSでスライドのスタイルを設定する
スライドの表示を調整するためのCSSを設定します。
<style>
.main {
height: 400px;
}
.thumbnail {
height: 100px;
}
.slide1 {
background-color: #ff7f7f;
}
.slide2 {
background-color: #ff7fff;
}
.slide3 {
background-color: #7f7fff;
}
.slide4 {
background-color: #7fffff;
}
.slide5 {
background-color: #7fff7f;
}
.slide6 {
background-color: #ffff7f;
}
.thumbnail .slick-slide {
opacity: 0.5;
cursor: pointer;
}
.thumbnail .slick-current {
opacity: 1;
}
</style>サムネイルスライドは半透明を初期状態として、アクティブになると透過なしで表示されるスタイルを設定しています。
また、サムネイルスライドをマウスホバーしたときのカーソルをポインターへ変更しています。
その他はサンプル用の配色設定となります
JavaScriptでSlickを設定する
Slickの機能を有効にするためのJavaScriptを記述します。
<script>
jQuery(document).ready(function () {
jQuery(".main").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: ".thumbnail",
autoplay: true,
autoplaySpeed: 2000,
});
jQuery(".thumbnail").slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: ".main",
centerMode: true,
focusOnSelect: true,
});
});
</script>サムネイルスライドは5枚を表示を基本として、残り一枚は半分ほど見切れて見えるような設定としています。
メインのスライドは1枚をフェードイン・アウトで自動的に切り替えながら表示します。
asNavForオプションを両方のスライドが連動するように指定しています。
Slick以外でサムネイル付きスライドを表示する方法
JavaScriptには他にもスライダーライブラリがあります。
Slick以外でサムネイル付きスライドを表示する方法もご紹介しています。
サムネイル付きスライドのWEBサイト制作事例
今回のようなサムネイル付きスライドを表示したWEBサイトの制作事例をご紹介します。
まとめ
今回はJavaScriptのスライダーライブラリ「Slick」を使って、自動で切り替わるサムネイル付きスライドをWEBサイトに表示する方法をご紹介しました。
asNavForオプションを活用することで、複雑な設定なしでメインスライドとサムネイルを連動させることができます。
WEBサイトに動きのある要素を取り入れたい方は、ぜひこの方法を試してみてください。
WEBサイトの制作や保守についてお困りのことがあれば、お気軽にご相談ください。
