JavaScript
jQueryプラグイン「scroll-hint」で横スクロールを気づきやすくする方法
2025.11.18
現場でもよく使う！jQuery「Slick」で作る実用スライダーの基本
2025.11.04
1. はじめに
前回の記事では、jQueryの導入方法や基本的な使い方を紹介しました。今回はその応用として、「プラグインの導入方法」と、jQueryプラグイン「Slick」を使って画像スライダーを作る方法を解説します。Slickは、Web制作でよく使われるスライダー系のプラグインで、自動再生やドットナビゲーション対応などが標準で備わっています。デザイン性が高く、カスタマイズしやすいのが特徴です。
2. jQueryプラグインとは？
jQueryプラグインとは、jQueryを拡張して新しい機能を追加できる外部スクリプトのことです。プラグインを使うことで、自分で複雑なJavaScriptを書くことなく、スライダーやモーダルウィンドウなどの動きを簡単に追加できます。無料で使えるものが多く、HTMLに数行追加するだけで利用できる点も魅力です。
3. プラグイン導入の基本手順
jQueryプラグインを導入する方法は、jQuery本体と同様にCDNを利用するのが簡単です。
基本的な手順は以下の3ステップです。
- jQuery本体を読み込む
- プラグインのCSS・JSファイルを読み込む
- 初期化コードを記述して動作を有効にする
まず、前回の記事でも紹介したように、HTMLファイルの</body>タグの直前にjQuery本体をCDNで読み込みます。
次に、使用したいプラグインのCSSとJSファイルを読み込みます。多くのプラグインは公式サイトにCDNリンクが掲載されているので、それをコピーして使うのが一般的です。CSSファイルは<head>タグ内に、JSファイルはjQueryのCDNと同様に</body>タグの直前に貼り付けます。注意点として、JSファイルのCDNは必ずjQuery本体の後に読み込むようにしましょう。順番を間違えるとプラグインが動作しない場合があります。
cssファイル
最後に、JavaScriptでプラグインを初期化するコードを記述します。基本的な記述は通常のjQueryと同じです。
$(function(){
$(指定した要素).プラグイン固有の処理({
プラグイン固有の設定
});
});
4. 実践：Slickでスライダーを作ってみよう
ここからは、Web制作で画像をスライドショー形式で表示できるプラグイン、Slick（公式サイト：https://kenwheeler.github.io/slick/）を使って、簡単な画像スライダーを作成してみます。
今回作成するスライダーの完成イメージは以下のようになります。
4.1. HTML
まずは、スライドさせたい画像をHTMLに並べます。
<div class="slider_sample"> <div><img src="image/slider_img1.png" alt="スライド1"></div> <div><img src="image/slider_img2.png" alt="スライド2"></div> <div><img src="image/slider_img3.png" alt="スライド3"></div> </div>
4.2. CSS
次に、スライダーとなる要素と画像の表示を整えます。
.slider_sample{
margin: 0 auto;
max-width: 600px;
}
.slider_sample img{
width: 100%;
object-fit: cover;
}
4.3. jQuery
この章では、Slickを実際に動作させるためのjQueryの書き方を解説します。HTMLとCSSの準備が整ったら、次はjQueryでSlickを初期化し、自動再生の有効化やスライドの切り替える速さをオプションで設定して、スライダーを機能させます。
ここでは以下の3つのステップに分けて説明します。
- どの要素にSlickを適用するか（セレクタの指定）
- Slickのオプション（設定項目）の種類
- 実際にオプションを設定して動作を確認する
順に見ていきましょう。
4.3.1. jQuery:セレクタの指定
3章で紹介したように、プラグインも通常のjQueryと同じように、セレクタで処理を行いたいHTML要素を指定します。オプションを何も設定しない状態で要素を指定すると、以下のようになります。
$(function(){
$('.slider_sample').slick({
});
このように記述することで、縦に並んでいた画像が1か所に集まり、スワイプ操作や左右の矢印ボタンで画像をスライドできるようになります。（※矢印ボタンの色はデフォルトで白です。）
4.3.2. jQuery:オプションの種類
Slickには多くのオプションが用意されています。ここでは、Web制作でよく使われる代表的な設定を紹介します。なお、数字以外の設定項目はtrue（有効）またはfalse（無効）で指定します。
| オプション名 | 説明 | 初期値 |
|---|---|---|
| autoplay | 自動でスライドを切り替える | false |
| autoplaySpeed | 自動切り替えの間隔（ミリ秒） | 3000 |
| speed | スライドの切り替え速度（ミリ秒） | 300 |
| infinite | 最後のスライドの後に最初に戻る | true |
| dots | 下にドットナビゲーションを表示 | false |
| arrows | 前後の矢印ボタンを表示 | true |
| slidesToShow | 一度に表示するスライド数 | 1 |
| slidesToScroll | 一度にスクロールするスライド数 | 1 |
| centerMode | 中央寄せでスライドを表示 | false |
4.3.3. jQuery:オプションの設定
上で紹介したオプションをいくつか設定すると、以下のようなコードになります。
$(function(){
$('.slider_sample').slick({
autoplay: true, // 自動再生
dots: true, // ドットナビゲーションを表示
arrows: true, // 前後の矢印を表示
infinite: true, // 無限ループ
speed: 500, // 切り替え速度
autoplaySpeed: 2000 // 自動再生の間隔
});
});
今回紹介したSlickの設定は基本的なものばかりです。より複雑なアニメーションやレスポンシブ対応などを設定したい場合は、公式サイトのドキュメントを参照することをおすすめします。
5. まとめ
今回は、jQueryプラグインの導入方法と、Slickを使ったスライダーの作成方法および基本的なオプション設定を紹介しました。Slickは、シンプルな構文で高度なスライダーを実装できる非常に便利なプラグインです。まずは基本設定を試し、慣れてきたらオプションを組み合わせて、自分のサイトに合ったスライダーを作ってみてください。
投稿一覧に戻る
