slick slider

slick sliderとは
slick sliderの導入方法
slick sliderの使い方

この「jQueryプラグイン」のレッスンでは、実際によく利用されるjQueryプラグインについて学びます。

プラグインについて

プラグインとは、特定の機能を簡単に追加できるプログラムのことです。
例えば、スマホアプリに「翻訳機能」を追加できるように、Webサイトにもプラグインを使うことで便利な機能を簡単に追加することができます。

また、今回学ぶjQueryプラグインを使えば、jQueryだけでは難しいアニメーションやデザインのカスタマイズを、少ないコードで簡単に実装できます。例えば、画像のスライドショー、ポップアップウィンドウ、アコーディオンメニューなどが手軽に作成できるようになります。

それでは、よく使用される「slick slider」について説明していきます。

slick sliderとは

slick sliderとは、jQueryベースのスライダーを作成するためのプラグインの1つです。
slick sliderを使えば、文字や画像が切り替わるスライダーを簡単に作成することができます。

See the Pen
7873_slick slider_004 by Yugo Harima (@yh-dezadezi)
on CodePen.

slick sliderの特徴

実装の簡単さ
シンプルなHTMLとjQueryを使って、簡単にスライダーを導入できます。
レスポンシブ対応
画面サイズに応じて表示を設定できる「ブレイクポイント機能」があり、スマホ・タブレット・PCで最適なスライダーを作成することができます。
カスタマイズのしやすさ
カルーセル（横にスライドするスライダー）のオプションが豊富で、動きやデザインを細かく調整することができます。

slick sliderの導入方法

slick sliderを導入するには、公式サイトからのダウンロードとCDNの利用の2つの方法があります。
どちらの場合も、以下のファイルが必要です。

slick.min.js（JSファイル）
slick.css（スタイルシート）
slick-theme.css（任意のスタイルシート）

導入時のポイント

「.min」が付いたJSファイルを使用する
「.min」が付いたファイルは、不要な空白や改行が削除されており、軽量で読み込みが速くなります。
そのため、「.min」付きのファイルを推奨します。
jQueryも忘れずに読み込んでおく
slick sliderはjQueryベースのプラグインなので、事前にjQuery本体を読み込んでおく必要があります。
slick-theme.cssを任意で設定する
slick-theme.cssは、Slick Sliderの基本的なデザインを整えるオプションのスタイルシートで、矢印やドット、スライドの間隔などを簡単に設定できます。
必須ではなく、任意で読み込むことができますが、標準的なデザインを使用する場合は読み込んでおくのが無難です。
デザインをカスタマイズしたい場合は、style.cssで上書きすることができます。

1.ファイルをダウンロードして利用する場合

公式サイトからファイルをダウンロード
公式サイトからslick sliderのファイルをダウンロードします。 slick slider公式サイト：https://kenwheeler.github.io/slick/ ※2025年2月7日時点の最新バージョンです。
「Download Now」ボタンをクリックすると、ローカルに「slick-1.8.1.zip」が保存されます。
zipファイルを解凍する
「slick-1.8.1.zip」を解凍すると、「slick」フォルダが含まれています。
プロジェクトフォルダに追加し、「slick.min.js」と「slick.css」へのパスを指定
「slick」フォルダの中から「slick.min.js」と「slick.css」のファイルをプロジェクトフォルダにコピーします。コピーしたファイルを適切なフォルダに配置し、HTMLのタグ内にパスを指定します。必要に応じて、「slick-theme.css」も同様に指定してください。
<head> 　<meta charset="UTF-8"> 　 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 　 <title>タイトル</title> 　  　 <link rel="stylesheet" href="css/slick.css"> 　 <link rel="stylesheet" href="css/slick-theme.css"> 　 <link rel="stylesheet" href="styles.css"> 　<script src="js/jquery-3.7.1.min.js"></script> 　 　<script src="js/slick.min.js"></script> </head>

2.CDNて利用する場合

公式サイトより公開されているCDNをコピーする
公式サイトからCDN経由で利用できるURLが公開されているのでコピーします。 slick slider公式サイト：https://kenwheeler.github.io/slick/ ※2025年2月7日時点の最新バージョンです。
CDNのパスを指定
コピーしたCDNをHTMLのタグ内にパスを指定します。
<head> 　<meta charset="UTF-8"> 　 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 　 <title>タイトル</title> 　  　<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 　<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> 　 <link rel="stylesheet" href="styles.css"> 　<script src="js/jquery-3.7.1.min.js"></script> 　 　<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> </head>

slick sliderの使い方

slick sliderの導入が完了したので、実際にslick sliderを使ってスライダーを作成してみましょう。

1：HTMLの準備

まずは、slick sliderのjQueryのコーディングが行えるように、HTMLを記述します。
また、HTMLにはjQueryを記述できるように、外部JSファイルを読み込んでおきましょう。

ポイントとしては、画像を囲むブロックにクラス（またはID）を付けることです。
このクラスを元に、jQueryでslick sliderのメソッドを呼び出して、スライダーを動作させます。

See the Pen
7873_slick slider_001 by Yugo Harima (@yh-dezadezi)
on CodePen.

2：slick sliderの記述

slick sliderのために必要なコードをJSファイルに記述します。

See the Pen
7873_slick slider_002 by Yugo Harima (@yh-dezadezi)
on CodePen.

3：オプションを使用してslick sliderをカスタマイズする

初期状態では見た目が整っていないので、オプションを使用して「見た目のカスタマイズ」と「動きのカスタマイズ」を行い、スライダーを調整していきます。

オプションの使い方のポイントは以下の3点です。

slick slider()の中に{}を入れてその中に処理を書く
「オプション名: 値」の形式で書く
オプションを複数設定する場合は「,」でつなぐ

今回は、「ドット状のナビを表示」「前/次にスライドを切り替える矢印」をオプションで追加してみます。

See the Pen
7873_slick slider_003 by Yugo Harima (@yh-dezadezi)
on CodePen.

オプションについて

オプションとは、slick sliderの動きやスライダー操作に関する見た目を管理する設定項目です。
オプションは非常に多く、さまざまな効果や挙動を設定できますが、ここでは使用頻度が高い代表的なものを紹介します。

オプション名	値(赤字は初期値)	概要
autoplay	true / false	自動再生
dots	true / false	ドット状のナビを表示
arrows	true / false	前/次にスライドを切り替える矢印
slidesToShow	1	表示するスライド数
slidesToScroll	1	1回で動くスライド数