はじめに
この記事は、画像や動画の切り替えに使用されているslick.js（以下、slick）の基本的な使い方や、その応用を簡単且つ直観的に学べます。
実際に記事の内容に沿って進める事で、色々試すことができるのでぜひ試してみてください。
以下画像は、slickで作られた機能が載っている画面の例です。
まず、slickって何？
「 jQueryベースの、スライダーを作成するためのプラグイン 」です。
以下のような特徴があり、初心者～上級者まで世界中で多くの方に利用されています。
- オプション（カスタム）が豊富
- レスポンシブ対応されている（デバイスに応じた見せ方が可能）
※jQueryとは、皆さんお馴染みフロントエンド開発の登竜門、JavaScriptのライブラリです。
JavaScriptコードをより簡単に書けるように設計されたもので、現在でも多くのWebアプリケーションで利用されています。
さっそく、実際に使ってみよう！
やり方１-初心者向け（超簡単）
以下のソースコードをコピーし、Visual Studio Codeなどのソースコードエディタでhtmlファイルを作成し、ペーストしましょう。
具体的なslickに関する説明は、以下の通りです。
- jQueryとslickをCDNから読み込み、使用できるようにする。（最新バージョンを使用）
- $(セレクタ).slick({オプション});をjQueryで実行する事で、セレクタの子要素がスライドできるようになる。
- セレクタの子要素が複数(2つ~)ない場合、スライドできるようにならない。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slick Slider Example</title>
<!-- SlickのCSSをCDNから読み込む -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<!-- カスタムCSSを読み込む -->
<style>
/* スライダーの次へ/戻る ボタンを見やすくするため */
body {
background: skyblue;
}
/* スライダーのスタイル */
.slider {
width: 80%;
margin: 50px auto;
}
.slider img {
width: 100%;
border-radius: 10px;
}
</style>
<!-- jQueryをCDNから読み込む -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- slickのJavaScriptをCDNから読み込む -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<!-- カスタムJavaScriptを追加 -->
<script>
$(function(){
// sliderクラスに対して、slickを初期化する。（autoplay等のオプションは、記述しない場合デフォルト値になる。）
$('.slider').slick({
// スライドの自動再生を有効にする （デフォルト値： false）
autoplay: false,
// 自動再生のスピード（ミリ秒単位） （デフォルト値： 3000）
autoplaySpeed: 3000,
// スライドのナビゲーションにドットを表示 （デフォルト値：false）
dots: false,
// スライドのナビゲーションに矢印を表示 （デフォルト値：true）
arrows: true,
// スライドの切り替え時にフェード効果を使用 （デフォルト値：false）
fade: false,
// スライドの切り替えにかかる時間（ミリ秒単位） （デフォルト値: 300）
speed: 300,
// スライダーの項目を一度に表示する数 （デフォルト値: 1）
slidesToShow: 1,
// スライダーの項目を切り替える際にスライドする数 （デフォルト値: 1）
slidesToScroll: 1,
// スライダーがリサイズする際に自動的に調整 （デフォルト値: false）
adaptiveHeight: false,
// スライダーが最初に表示されるインデックス（0から始まる） （デフォルト値: 0）
initialSlide: 0,
// スライダーがループするかどうか （デフォルト値: true）
infinite: true, // falseにすると、スライダーが終わってもループしない
// スライダーのアイテムが画面に収まるように調整 （デフォルト値: false）
centerMode: false, // trueにすると、現在のスライドを中央に配置
// スライダーをレスポンシブにするための設定 （デフォルト値: 空配列（レスポンシブ設定なし））
responsive: [
// {
// breakpoint: 768, // 768px以下のスクリーン幅に対する設定
// settings: {
// slidesToShow: 2,
// slidesToScroll: 2,
// dots: true
// }
// },
// {
// breakpoint: 480, // 480px以下のスクリーン幅に対する設定
// settings: {
// slidesToShow: 1,
// slidesToScroll: 1,
// dots: true
// }
// }
]
});
});
</script>
</head>
<body>
<!-- sliderクラス内に画像を配置 -->
<!-- $('.slider').slick({});をjQueryで実行することで、sliderクラスの子要素（childクラス）がスライドできるようになる。 -->
<div class="slider">
<div class="child"><img src="https://via.placeholder.com/600x300?text=Image+1" alt="Image 1"></div>
<div class="child"><img src="https://via.placeholder.com/600x300?text=Image+2" alt="Image 2"></div>
<div class="child"><img src="https://via.placeholder.com/600x300?text=Image+3" alt="Image 3"></div>
<div class="child"><img src="https://via.placeholder.com/600x300?text=Image+4" alt="Image 4"></div>
</div>
</body>
</html>
ブラウザ表示させると、以下のような画面が表示されます。
※読込に少し時間がかかる場合があります。
やり方2-中級~上級者向け（実務レベル）
-
まずはjQueryとslickをダウンロードしよう
-
jQuery公式ページの、Download jQuery..を右クリック⇒名前を付けてリンク先を保存 をクリック
-
slick公式ページの、get it nowタブをクリック⇒Download Nowをクリック
-
-
ダウンロードしたファイルを、プロジェクト内の好ましい位置に配置
-
slickを読み込みたい画面のファイル内で、配置したjQueryとslickを読み込む
- slick.jsの機能やメソッドはjQueryの機能に依存しているため、slick.jsを使用する前に必ずjQueryを読み込む必要があります。
そのため、必ずjQuery⇒slickという順で書いてください。<script src="/jquery-3.7.1.min.js"></script>
<script src="/slick.min.js"></script>
- slick.jsの機能やメソッドはjQueryの機能に依存しているため、slick.jsを使用する前に必ずjQueryを読み込む必要があります。
-
HTMLでスライドを行う要素を記述（例）
<div class="セレクタ">
<!-- この中の要素がスライダー表示される -->
<div class="child"><img src="https://via.placeholder.com/600x300?text=Image+1" alt="Image 1"></div>
<div class="child"><img src="https://via.placeholder.com/600x300?text=Image+2" alt="Image 2"></div>
<div class="child"><img src="https://via.placeholder.com/600x300?text=Image+3" alt="Image 3"></div>
<div class="child"><img src="https://via.placeholder.com/600x300?text=Image+4" alt="Image 4"></div>
</div> -
セレクタの子要素が複数ある事を確認し、jQuery（JavaScript）でスライダー初期化処理を記述
$('セレクタ').slick({
// slickのオプションをここに追加
autoplay: true, // 自動再生
autoplaySpeed: 2000, // 自動再生の間隔（ミリ秒）
dots: true, // ドットナビゲーションの表示
arrows: true // 矢印ナビゲーションの表示
}) -
画面を確認して、問題なく表示されれば完了です！
slickで使用される、便利なイベントとメソッド
$(function(){
// slick初期化
$('#slider').slick({
// 自動再生有効化
autoplay: true
});
$('#slider')
// スライドが変更される直前に発火
.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
// currentSlide: 現在のスライドのインデックス
// nextSlide: 次に表示されるスライドのインデックス
})
// スライドが変更された後に発火
.on('afterChange', function(event, slick, currentSlide) {
// currentSlide: 現在表示されているスライドのインデックス
})
// スライダー初期化時
.on('init', function(event, slick) {
// slick: スライダーオブジェクト
})
// スライダー再初期化時
.on('reInit', function(event, slick) {
// slick: スライダーオブジェクト
})
// ブレークポイントに達した時
.on('breakpoint', function(event, slick, breakpoint) {
// breakpoint: 適用されたブレークポイントの値
})
// スライダーの位置が変更された時
.on('setPosition', function(event, slick) {
// slick: スライダーオブジェクト
})
// スライダーがスワイプされた時
.on('swipe', function(event, slick, direction) {
// direction: スワイプされた方向 ('left', 'right', 'up', 'down')
})
// 遅延ロードされた画像が読み込まれた時
.on('lazyLoaded', function(event, slick, image, imageSource) {
// image: 読み込まれた画像要素
// imageSource: 画像のソースURL
});
// 要素をスライダーに追加
$('#slider').slick('slickAdd', 要素);
// 指定したスライドを削除
$('#slider').slick('slickRemove', インデックス);
// 次のスライドに移動
$('#slider').slick('slickNext');
// 前のスライドに移動
$('#slider').slick('slickPrev');
// 自動再生を一時停止
$('#slider').slick('slickPause');
// 自動再生を再開
$('#slider').slick('slickPlay');
// オプションを動的に変更（optionをvalueに変更。refreshはbool値で、スライダーを完全に再初期化するか否か。）
$('#slider').slick('slickSetOption', option, value, refresh);
// スライダーを初期化解除
$('#slider').slick('unslick');
});
さいごに
スライダーを作りたいけど、難しそう。何から始めればいいか分からない。 という方から、
スライダーは作成できたけど、イベントなど応用的な使い方がよく分からない。という方まで、
幅広く参考になればと思いslickの使い方を説明しました。
オプションやイベントの組み合わせ次第で、多種多様なスライダーを作成する事ができますので、
ぜひ自分のサイトや実務など、様々な場所で活かしていただけると幸いです。
最後までお読みいただきありがとうございました。
※もっと知りたい方は、slick公式サイトで確認してみてください。（ソースコードや画像切り替えを確認できます。）
