などの疑問や悩みを解決してまいります。
スライダ―を1から実装すると構造が複雑で、レスポンシブのことも考えるとけっこう実装が手間ですが、jQueryプラグインの『slick』を使うことで簡単に、そして高品質なスライダーを実装することができます。
しかし、jQueryプラグインを使ったことがないと、『実装難しいのでは?』というイメージを持たれている方もいるかと思います。
安心してください。slickの実装はとても簡単で初心者にもとっつきやすいjQueryプラグインなんです!
今回はslickを使ったスライダーの実装方法とカスタマイズについて解説します。
slickとは
slickは、jQueryを使用してスライダーを簡単に実装することができるプラグインです。
レスポンシブ対応はもちろん、多くのオプションや設定を提供しており、カスタマイズも豊富で見た目や動作を簡単に変更することもできてしまうという便利なプラグインで、多くの開発者が利用しています。
しかし、導入方法が分からないという方もいらっしゃるかと思いますので、次の章からさっそくslickの使い方に進みたいと思います。
slickを導入して、ダウンロードファイルを読み込む
それでは早速slickを導入して実際にスライダーを作成していきましょう。
slickの公式サイトにアクセス
まずはslickの公式サイトにアクセスします。
アクセスしたら上記のような画面になると思います。
slickファイルをダウンロードして使用する場合
ヘッダーのグロナビにある『get it now』をクリックします。
するとダウンロードボタンのある個所までスクロールされますので、『Download Now』をクリックし、ファイルをダウンロードします。
ダウンロードファイルから使用するファイルを読み込む
ダウンロードが出来ましたら、ダウンロードしたファイルを読み込んでいきましょう。
ダウンロードしたファイルの内、slickを使用する上で必要不可欠なファイルは以下になります。
実装に必要なファイル
- slick.min.js(スライダーの動きを実装するためのjsファイル)
- slick.css(スライダーの最低限のレイアウトを整えるためのCSSファイル)
また上記とは別にjQueryを使用しますのでこちらも読み込む必要があります。
これらのファイルをHTMLで読み込み、使用していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>slickを学ぼう</title>
<!-- slick専用CSS -->
<link rel="stylesheet" type="text/css" href="/css/slick.css" />
<!-- レイアウト用CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<div class="container">
<!-- ここからslickの内容 -->
<!-- ここまで -->
</div>
<!-- jQueryの読み込みも忘れず -->
<script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
<!-- slick専用jsファイル -->
<script type="text/javascript" src="/js/slick.min.js"></script>
</body>
</html>
このように読み込むことが出来ましたら、実際にslickを使用してスライダーを作成していきましょう。
slickを使用してスライダーを実装する
それではさっそくslickを使用してスライダーを実装していきたいと思います。
まずは新しくjsファイルを用意して、「slickを使用するよ!」という宣言を記述します。
$(document).ready(function () {
$(".slider").slick(); //スライダーを実装するタグのクラスまたはIDを指定する
});
今回はslider
クラスを指定していますが、ここは好きなクラスかIDを指定いただいてOKです。
次にHTMLファイルにスライダーコンテンツを記述していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>slickを学ぼう</title>
<!-- slick専用CSS -->
<link rel="stylesheet" type="text/css" href="/css/slick.css" />
<!-- 読み込み追加分のCSSファイル -->
<link rel="stylesheet" type="text/css" href="/css/slick-theme.css" />
<!-- レイアウト用CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<div class="container">
<!-- ここからslickの内容 -->
<ul class="slider">
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide01.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide02.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide03.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide04.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide05.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide06.png" alt="" /></li>
</ul>
<!-- ここまで -->
</div>
<!-- jQueryの読み込み忘れず -->
<script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
<!-- slick専用jsファイル -->
<script type="text/javascript" src="/js/slick.min.js"></script>
<!-- slick使用の宣言を記述 -->
<script type="text/javascript" src="/js/script.js"></script>
</body>
</html>
ちなみに今回style.cssは以下の記述にしています。
* {
margin: 0;
padding: 0;
}
body {
background-color: #999; // 矢印を見やすくするため(矢印自体をCSSで編集してもOK)
}
.container {
width: 100%;
max-width: 1000px;
margin: auto;
/* 表示確認のため中央寄せ */
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
読み込むべきファイルをしっかり読み込んでいれば以下のように表示されるはずです。
上から順に「前に戻るボタン」「画像」「次に進むボタン」が表示されていればOKです。
しかし、「前に戻るボタン」「次に進むボタン」がデフォルト間強めのデザインで、画像挟んで上下にボタンがあるのも微妙です。
直接style.cssを編集してレイアウトを整えてもいいのですが、今回はslickをダウンロードしたファイルにslick-theme.cssがあるはずなのでこちらを読み込んでいきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>slickを学ぼう</title>
<!-- slick専用CSS -->
<link rel="stylesheet" type="text/css" href="/css/slick.css" />
<!-- 読み込み追加分のCSSファイル -->
<link rel="stylesheet" type="text/css" href="/css/slick-theme.css" />
<!-- レイアウト用CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<div class="container">
<!-- ここからslickの内容 -->
<ul class="slider">
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/1.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/2.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/3.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/4.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/5.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/6.png" alt="" /></li>
</ul>
<!-- ここまで -->
</div>
<!-- jQueryの読み込み忘れず -->
<script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
<!-- slick専用jsファイル -->
<script type="text/javascript" src="/js/slick.min.js"></script>
<!-- slick使用の宣言を記述 -->
<script type="text/javascript" src="/js/script.js"></script>
</body>
</html>
すると「前に戻るボタン」「次に進むボタン」が矢印に変更されて位置も画像の左右になります。
これでslickを使用して基本的なスライダーを実装することができました。
slickスライダーをカスタマイズする方法
slickスライダーはレイアウトや画像の切り替えの動きを簡単にカスタマイズできることが最大の強みと言っていいでしょう。
ここではslickスライダーのカスタマイズ方法について解説していきます。
画像下にドットを追加する方法
スライダー画像下にドットを表示させることができます。
その場合は以下のように記述します。
$(document).ready(function () {
$(".slider").slick({
dots: true, // ドットを表示(falseで非表示)
});
});
dots: true
を追記することで画像下にドットを表示できます。
ドットが小さいのと左右の矢印を見やすくするために背景をグレーにしているため見づらいですが、表示されているのが分かるかと思います。
とはいえこのままでは小さく見づらいので、CSSで大きくしましょう。
ドットを大きくするために以下をstyle.cssに追記します。
.slick-dots li button:before {
font-size: 26px;
}
このようにドットを大きくしたり色を変えたりCSSで編集することもできます。
スライダー画像を複数枚表示する方法
これまでスライダー画像が表示されている枚数が1枚でしたが、当然複数枚表示にすることも可能です。
今回は3枚にしてみます。jsファイルに以下のように追記しましょう。
$(document).ready(function () {
$(".slider").slick({
dots: true,
slidesToShow: 3, // 表示する枚数を指定
});
});
このようにslidesToShow: 表示したい数値
を追記することで、その設定した枚数分表示することができます。
しかし、画像同士が密着していて窮屈なのでstyle.cssに以下を追記しましょう。
/* .sliderの箇所は自分で決めたクラス名でOK */
.slider li {
padding: 0 10px;
box-sizing: border-box;
}
このように画像同士に余白が生まれて窮屈さがなくなりました!
3枚ずつスライドさせる方法
これまでは1枚ずつでしかスライドさせることができませんでしたが、一気に複数枚スライドさせる方法です。
今回は3枚ずつスライドさせられるようにしていきます。
jsファイルに以下のslidesToScroll: スライドさせたい数値
を追記します。
$(document).ready(function () {
$(".slider").slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 3 // 一度に複数枚スライドさせる
});
});
このように一気に3枚分スライドさせることができました。
自動でスライドさせる方法
これまでは手動でスライドさせていましたが、自動スライドを設定することもできます。
以下のコードを追記します。
$(document).ready(function () {
$(".slider").slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true, // 自動でスライドさせる
autoplaySpeed: 2000, // スライドさせる時間を設定
});
});
autoplay: true
は自動でスライドさせたいかどうか設定することができ、true
で自動スライドさせてfalse
で自動スライドさせないように設定ができます。
autoplaySpeed: 時間
で自動でスライドさせる時間を設定することができます。
画像の切り替わり方をフェードにする方法
これまではスライドさせたときに左右にスライドして画像が切り替わる動きでしたが、この動きをフェードに変更することもできます。
その場合は以下のように追記します。
$(document).ready(function () {
$(".slider").slick({
dots: true,
fade: true, // フェードに切り替える
speed: 1000, // 切り替わるスピード時間設定
});
});
このように画像の切り替わり方をフェードに設定することができます。
スライド画像を中心にし、左右の画像が見切れた状態にする方法
テキストだけでの説明では理解が難しいかと思いますのでどういうことか実際に見てみましょう。
このように、スライドが中央に配置され左右の端にある画像が見切れた状態で表示されるように設定することができます。
設定方法は以下です。
$(document).ready(function () {
$(".slider").slick({
dots: true,
centerMode: true, // 画像の中央配置設定
centerPadding: '60px', // 両端の見切れる幅を指定
slidesToShow: 3,
});
});
centerMode: true
とすることで、スライド画像を中央に配置できます。
centerPadding: '見切れる幅の数値'
は、両端の画像の見切れる度合いを設定できます。
例えば100pxとしたら100px分見切れて表示されるように設定ができます。
スライダーを別のスライダーのナビゲーションに設定する方法
こちらもタイトルだけではイメージしづらいと思いますので、先にどのようなものか見ていただいてから解説に入ります。
このようにスライダーを2つ用意して、スライダーがもう1つのスライダーのナビゲーションとして連動して動いてくれる設定です。
それぞれ変更したファイルは以下の通りです。
<div class="container">
<!-- ここからslickの内容 -->
<ul class="slider">
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide01.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide02.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide03.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide04.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide05.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide06.png" alt="" /></li>
</ul>
<!-- 追加したスライダー -->
<ul class="slider_nav">
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide01.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide02.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide03.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide04.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide05.png" alt="" /></li>
<li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide06.png" alt="" /></li>
</ul>
<!-- ここまで -->
</div>
* {
margin: 0;
padding: 0;
}
body {
background-color: #999;
}
.container {
width: 100%;
max-width: 1000px;
margin: auto;
/* 表示確認のため中央寄せ */
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
/* slider_navクラスのCSSを追加 */
.slider_nav {
margin-top: 20px;
}
.slider li,
.slider_nav li {
padding: 0 10px;
box-sizing: border-box;
}
.slider img,
.slider_nav img {
width: 100%;
max-width: 100%;
}
.slick-dots li button:before {
font-size: 26px;
}
$(document).ready(function () {
$(".slider").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider_nav' // 連動させるもう一つのスライダーを指定
});
$('.slider_nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider', // 連動させるもう一つのスライダーを指定
dots: true,
centerMode: true,
focusOnSelect: true // クリックしたスライド画像に移動
});
});
連動させたいスライダーがある場合は、asNavFor: '.連動させたい要素'
で結び付けます。
結びついたスライダーは連動して動いてくれる仕組みになります。
slickスライダーをレスポンシブに対応させる方法
いくら高品質なスライダーを実装できてもスマホ対応されていなければ意味がありません。
スライダーをレスポンシブ対応するのは少々面倒ではありますが、slickではレスポンシブにもしっかり対応してくれています。
レスポンシブ対応にするには以下のように記述します。
$(document).ready(function () {
$(".slider").slick({
dots: true,
slidesToShow: 4,
slidesToScroll: 4,
// ここからレスポンシブの指定
responsive: [
{
breakpoint: 1024, // ブレイクポイントの指定
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 768, // ブレイクポイントの指定
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480, // ブレイクポイントの指定
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
まずレスポンシブ対応を行う場合は、responsive: []
を記述し、この配列の中にレスポンシブの指定を記述します。
配列の中にはブレイクポイントの数だけオブジェクトを用意し、 settings: {}
の中にブレイクポイントごとの指定を記述していきます。
今回はブレイクポイントを1024pxに設定し、画面幅が1024px未満の場合はスライドの表示枚数を3枚にします。
また768px未満でスライドを2枚、480px未満で1枚としています。
このようにslickでは簡単にレスポンシブ時の指定をすることができるで非常に便利です。
まとめ
ここまで読んでいただきありがとうございました。
今回はjQueryプラグインの「slick」について解説させていただきました。
スライダーは1から作るのは面倒なので、slickを使用してスライダーを実装することも多いですが、初心者でも簡単にスライダーを実装できてしまうのとカスタマイズ性が高くとても便利なプラグインです。
また、今回説明しきれなかったカスタマイズ用オプションもありますのでぜひ、slickのサイトで調べてみてください。
ありがとうございました!