スライダー実装を手軽に！jQueryライブラリ「slick」の使い方まとめ

サイトでよくあるスライダーってどうやって作んだ？？

本記事では、スライダー実装を手軽にできるライブラリ「Slick」の使い方を解説します。

づみ

slickの使い方をよく忘れちゃうので自分用にもメモメモ。

実装の手順をひとつひとつ解説するので、初めての人でも試しにできるようになってます。ぜひお試しあれ。

Slickとは

SlickはスライダーUIを実装するためのjQuery製のライブラリです。

ライブラリとは？

スライダーなどのWebサイトでよく使うパーツを簡単に実装できるように、まとめられたファイルのこと。厳密には下記参照。

参考ライブラリとは (library)： – IT用語辞典バイナリ

Slickを使ってみよう

手を動かしながら見ていきましょう。スライダーを実装するまでの一連の手順を説明します。

slickの導入方法

CDNを読み込む
公式から必要ファイルをダウンロードする

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」を押してください。

ひとつずつ解説します。

１： <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ファイル !-->

２：スライダー部分の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