
サイトでよくあるスライダーってどうやって作んだ??
本記事では、スライダー実装を手軽にできるライブラリ「Slick」の使い方を解説します。

slickの使い方をよく忘れちゃうので自分用にもメモメモ。
実装の手順をひとつひとつ解説するので、初めての人でも試しにできるようになってます。ぜひお試しあれ。
目次
Slickとは
SlickはスライダーUIを実装するためのjQuery製のライブラリです。
スライダーなどのWebサイトでよく使うパーツを簡単に実装できるように、まとめられたファイルのこと。厳密には下記参照。
Slickを使ってみよう
手を動かしながら見ていきましょう。スライダーを実装するまでの一連の手順を説明します。
slickの導入方法
- CDNを読み込む
- 公式から必要ファイルをダウンロードする
下記を<head>部分に追加しましょう。
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <!-- CSS !-->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <!-- JS !-->
上記は2023年3月現在のCDNコードです。最新版は都度公式サイトのこちらから確認してね。
https://kenwheeler.github.io/slick/
↑からSlickの公式サイトにアクセスして、メニュー右端の「Get it now」をクリック。

画面がスクロールされるので、スクロール先の「Download Now」をクリック。

Zipファイルがダウンロードされるので、解凍してください。中にいろいろなフォルダが含まれていますが、必要になるのはslickフォルダにある下記の5点のみです。
- fontsフォルダ
- slick.css
- slick-thime.css
- slick,min.js
- ajaxloader.gif

↑のような感じで読み込ませれば事前準備はOKです。
slickの使い方
ここでは手軽に実装を進めるため、CDNを使った方法で説明します。
スライダーのデモを用意しました。
See the Pen Untitled by yoshizumi1102 (@yoshizumi1102) on CodePen.
※見えづらいときは「0.5x」を押してください。
ひとつずつ解説します。
1: <head>部分にCDNを読み込ませる
headタグ内にCSS、<body>直下にJSのCDNコードをコピペします。
またSlickはjQueryで動くので、jQueryのCDNも<head>内で読み込ませましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slick</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="./main.js"></script> <!-- JSファイル !-->
2:スライダー部分のHTML記述
次にスライダー部分を記述していきます。ソースコードは下記。
<div class="slider" id="js-slider">
<div class="slide-item"><img src="https://placehold.jp/500x350.png" alt=""></div>
<div class="slide-item"><img src="https://placehold.jp/3d4070/ffffff/500x350.png" alt=""></div>
<div class="slide-item"><img src="https://placehold.jp/f00/ffffff/500x350.png" alt=""></div>
<div class="slide-item"><img src="https://placehold.jp/ff0/000000/500x350.png" alt=""></div>
<div class="slide-item"><img src="https://placehold.jp/333/ffffff/500x350.png" alt=""></div>
<div class="slide-item"><img src="https://placehold.jp/1e1e1e/ffffff/500x350.png" alt=""></div>
</div>
js-sliderというID名が親要素、子要素のslide-itemはスライドさせたい要素です。
3: JSコードを記述する
ソースコードは下記です。
$(function() {
$('#js-slider').slick();
});
↑一応これだけで、Slickは動きます。なんとお手軽!
この状態で見てみると下記のような表示になっているはず。

スタイルは崩れてますが、動作はするようになりましたね。
スライダーのスタイルを調整しよう
このままだと不細工なのでスタイルを調整していきましょう。
まず、「Previous」「Next」の部分を矢印に変更します。
JS
JSファイルに以下を追加してください。
$('#js-slider').slick({
nextArrow: '<button type="button" class="slide-arrow slick-next"></button>',
prevArrow: '<button type="button" class="slide-arrow slick-prev"></button>',
});
nextArrow, prevArrowは、矢印を任意のHTMLに変更することができます。お好みの画像等を入れたい場合はimgタグを入れられます。
CSS
次にCSSを調整します。
#js-slider {
width: 600px;
margin: 40px auto;
max-width: 100%;
}
.slide-item {
width: 500px;
height: 350px;
}
.slide-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
outline: none;
background: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
z-index: 1;
}
.slide-arrow::before {
transform: rotate(45deg);
content: "";
width: 12px;
height: 12px;
display: block;
border: solid black;
border-width: 3px 3px 0 0;
top: 24px;
position: absolute;
}
.slide-arrow.slick-next {
right: 0;
}
.slide-arrow.slick-prev {
left: 0;
}
.slide-arrow.slick-next::before {
right: 24px;
}
.slide-arrow.slick-prev::before {
left: 24px;
border-width: 0 0 3px 3px;
}

こんな感じになります!
Slickのよく使うオプションまとめ
オプション名 | 説明 | 初期値 |
autoplay | スライドを自動再生するかどうかを設定します。 | false |
dots | ページネーションドットを表示するかどうかを設定します。 | false |
slidesToShow | 一度に表示するスライドの数を設定します。 | 1 |
slidesToScroll | 一度にスクロールするスライドの数を設定します。 | 1 |
infinite | スライドのループを有効にするかどうかを設定します。 | true |
speed | スライドのアニメーションの速度を設定します。 | 300 |
centerMode | 中央揃えのスライドを有効にするかどうかを設定します。 | false |
variableWidth | 可変幅のスライドを有効にするかどうかを設定します。 | false |
adaptiveHeight | スライドの高さを自動調整するかどうかを設定します。 | false |
responsive | レスポンシブなレイアウトを設定します。 | null |
他にも色々オプションはあるので、より深く知りたい人は下記を参考にどうぞ!
まとめ
というわけでjQueryライブラリ「Slick」のご紹介でした。
スライダーUIはWeb制作において使う場面が非常に多いので、ぜひSlickをマスターしてみてくだされ!
それでは!