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

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

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

づみ
づみ

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

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

Slickとは

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

ライブラリとは?

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

Slickを使ってみよう

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

slickの導入方法

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

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」をクリック。

slickの公式サイト

画面がスクロールされるので、スクロール先の「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をマスターしてみてくだされ!

それでは!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA