jQueryにはWebサイトの制作を簡単にするためのプラグインがたくさん存在します。
jQueryのプラグインを使用すると初学者の方でもWebサイトのパーツを簡単に作ることができます。
スライドショーやカルーセルパネルはWebサイトの制作に欠かせません。
この記事ではスライドショーを実装するときに使いたいおすすめのプラグインを紹介します。
- スライドショーが作れるjQueryプラグインの使い方
- 現場でよく使われるスライドショープラグインの基礎知識
JavaScriptが難しくて挫折しそうなあなたへJavaScriptは独学で進めると難しい内容も多いですよね。相談相手がいないと煮詰まってしまうこともあるかと思います。
もし学習の進め方について悩まれているならば、ZeroPlusの無料相談会への参加をお勧めします。
ZeroPlusはWeb制作のフリーランス育成に特化したプログラミングスクールです。超フレンドリーなメンターがあなたの疑問や悩みについて、なんでもお答えします。
＼お申し込みは30秒で終わります。／
学習方法の悩み、私たちと一緒に解消しましょう！
目次
jQueryのプラグインとは
jQueryはJavaScriptのライブラリの一つです。ライブラリとは様々な機能をパーツ化したものです。そんなjQueryには下記のように様々なプラグインが存在します。
jQueryのプラグインの種類
- スライドショー系（スライダー）
- スクロール系
- アニメーション系
- UI系
これらのプラグインはCDNで簡単に利用することができます。CDNとは、「Contents Delivery Network」の略称で外部のファイルをリンク1つで使用することができる仕組みです。CDNの使い方は下記のとおりです。
- プラグインのCDNリンクをbodyタグの直前/headタグに記述
- JavaScriptファイルに、プラグイン専用の記述をする。
ここからはスライドショー系のプラグインに絞って紹介していきます！
slick ：安定して使える定番にしておすすめ王道スライダー
- 公式サイト：http://kenwheeler.github.io/slick/
- デモ、オプションは同ページ内に記述
不具合も少なく、安定的に使えるのがslickプラグインです。こちらもbxsliderと同様に豊富なオプションがあります。
slickの代表的なオプション
- スライドショーのアニメーションの時間を調整
- レスポンシブに対応する
- センターモードにする（真ん中のスライドを大きく見せる）
- スライドの追加、削除機能
- スワイプ対応
slickを使うには下記の記述をbodyタグの直前、もしくはheadタグに埋め込みます。
slickを使う準備
slickは上から順番に3つのファイルを読み込んで使用します。
- slick.css
- jquery.min.js
- slick.min.js
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>最小限のコードでslickを実際に使ってみます。
cssは記述しなくても良いですが、見た目を整えるために記述を追加しています。
<html lang="ja">
<!DOCTYPE html>
<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, maximum-scale=1.0, minimum-scale=1.0">
<title> Document </title>
<!-- slick -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slide-items__wrap">
<ul class="slide-items">
<li class="slide-items__item">
<img src="images/sample.png" alt="">
</li>
<li class="slide-items__item">
<img src="images/sample.png" alt="">
</li>
<li class="slide-items__item">
<img src="images/sample.png" alt="">
</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>$('.slide-items').slick();.slide-items__wrap {
width: 50%;
height: 50%;
margin: auto;
}
次に、オプションを使った例を紹介します。
今回は3つのオプションを追加します。
- 自動再生
- 表示枚数を2枚に設定
- レスポンシブ設定（768px以下で表示枚数を1枚に変更）
$('.slide-items').slick({
autoplay: true, // スライド自動再生
slidesToShow: 2, // 表示させるスライドの枚数
responsive: [{ // レスポンシブ設定
breakpoint: 768, // ブラウザ幅768px以下
settings: {
slidesToShow: 1,
}
}]
});出力結果
slickはレスポンシブごとにオプションの設定をすることができます。
slickのメリット
slickのメリットはカスタマイズ性に優れ、幅広く使われている優良なプラグインであるという点です。使っている人が多いので、実装に詰まっても調べれば情報が出てくるという利点があります。
slickのデメリット・注意点
slickのデメリットはカスタマイズに優れている反面、少し扱いが難しいという点です。カスタマイズ性がありすぎるので、応用した使い方になると難しくなります。
動かないときの対処方法
slickが動かない場合は下記の理由が考えられます。
- jQueryのCDNのバージョンが新しい
- headタグの中、もしくはbodyタグの直前にslickのCDNを記述していない
- jQueryのCDNファイルとslickのCDNファイルの読み込み順が逆になっている
CDNファイルを読み込む順番も重要です。例えば、jQueryのCDNファイルを最後に読み込むようにするとslickは動きません。
bxslider：初心者でも簡単に使えるスライダー
- 公式サイト：https://bxslider.com/
- プラグインデモ：https://bxslider.com/examples/
- オプション：https://bxslider.com/options/
bxsliderに限らず、プラグインにはデフォルトの機能にさらに機能を追加することができる「オプション」機能があります。プラグインによってオプションの内容は違います。
下記はbxsliderで使えるオプションの一例です。
bxsliderの代表的なオプション
- スライドショーのアニメーションの時間を調整
- レスポンシブに対応する
- スライド間の遷移タイプを変更する（水平、垂直、フェード）
- スライド間のマージンを調整
bxsliderはオプションの種類が多く、カスタマイズが容易なため初心者にはおすすめです。
bxsliderを使うためには下記の記述をbodyタグの直前、もしくはheadタグに埋め込みます。
bxsliderを使う準備
bxsliderは上から順番に3つのファイルを読み込んで使用します。
- jquery.bxslider.css
- jquery.min.js
- jquery.bxslider.min.js
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>最小限のコードでbxsliderを実際に使ってみます。
<html lang="ja">
<!DOCTYPE html>
<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, maximum-scale=1.0, minimum-scale=1.0">
<title> Document </title>
<!-- bxslider -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<!-- css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slide-items__wrap">
<ul class="slide-items">
<li class="slide-items__item">
<img src="images/sample.png" alt="">
</li>
<li class="slide-items__item">
<img src="images/sample.png" alt="">
</li>
<li class="slide-items__item">
<img src="images/sample.png" alt="">
</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>$(document).ready(function () {
$('.slide-items').bxSlider();
});出力結果
次に、オプションを使った例を紹介します。
今回は3つのオプションを追加します。
- 自動再生
- 縦方向へスライド
- スライド時間を1秒に設定
$(document).ready(function () {
$('.slide-items').bxSlider({
auto: true, // スライド自動再生
mode: 'vertical', // 縦方向にスライド
speed: 1000, // スライド時間
});
});出力結果
bxsliderのメリット
bxsliderのメリットは、初心者向きでカスタマイズが容易であるという点です。
bxsliderのデメリット・注意点
注意点としては、bxsliderの更新は2018年で止まっているため、2022年現在で使用する際は何かしらの不具合が発生する可能性があります。
動かないときの対処方法
bxsliderが動かない場合は下記の理由が考えられます。
- jQueryのCDNのバージョンが新しい
- headタグの中、もしくはbodyタグの直前にbxsliderのCDNを記述していない
- jQueryのCDNファイルとbxsliderのCDNファイルの読み込み順が逆になっている
bxsliderの更新が2018年で止まっているため、jQueryのCDN最新バージョン(2022年現在:3.6.0)では動かないです。最新バージョンを使っている場合は、バージョンを下げて使用しましょう。
CDNファイルを読み込む順番も重要です。例えば、jQueryのCDNファイルを最後に読み込むようにするとbxsliderは動きません。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- jQueryのCDNを後にすると動かない =->bxsliderに限らずファイルの読み込み順によってプラグインは動かなくなるで読み込み順に注意しましょう。
swiper ：jQuery不要で使える高速スライダー
swiperの大きな特徴の一つとして、「jQueryなどのライブラリ不要で使える」プラグインということです。なので、他のスライダープラグインよりも高速で使うことができます。レスポンシブにも対応していて、スマホのタッチ、スワイプ、タップなども使えます。
swiperの代表的なオプション
- 縦方向スライド
- レスポンシブ対応
- ページネーションを分数タイプにする（1/3、1/4など）
- 画像遅延読み込み
- 複数行スライドレイアウト
swiperを使うには下記の記述をscriptタグをbodyタグの直前、もしくはheadタグに埋め込みます。
swiperを使う準備
swiperは上から順番に2つのファイルを読み込んで使用します。
- swiper-bundle.min.css
- swiper-bundle.min.js
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>最小限のコードでswiperを実際に使ってみます。
<html lang="ja">
<!DOCTYPE html>
<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, maximum-scale=1.0, minimum-scale=1.0">
<title> Document </title>
<!-- swiper -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<!-- css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/sample.png" alt="">
</div>
<diuv class="swiper-slide">
<img src="images/sample.png" alt="">
</diuv>
<div class="swiper-slide">
<img src="images/sample.png" alt="">
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>const swiper = new Swiper(".swiper", {});
出力結果
次に、オプションを使った例を紹介します。
今回は3つのオプションを追加します。
- 3秒間で自動再生
- 立体的にスライド
- 側面の影を削除
const swiper = new Swiper(".swiper", {
autoplay: { // スライド自動再生
delay: 3000,
},
effect: 'cube', //立体的にスライド
cubeEffect: {
slideShadows: false,
},
});/*調整用CSS*/
.swiper {
width: 50%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}出力結果
swiperのメリット
swiperのメリットは、jQueryが不要で使えるという点です。さらに、jQueryの読み込みが不要なので高速で使うことができるというのも大きなメリットです。
爆速でスライドショーを実装したいときに使えるプラグインです。
swiperのデメリット・注意点
jQuery不要で使える便利なプラグインですが、デメリットも存在します。
- 古いブラウザに対応していない
- 公式ドキュメントが英語のみ
- バージョン5以降はIE対象外
IEに関しては2022年6月にサポートが終了するので、こちらに関してはあまり気にする必要はないでしょう。
モダンブラウザには対応しているものの、古いブラウザには対応していないので注意しましょう。
動かないときの対処方法
swiperが動かない場合は下記の理由が考えられます。
- swiper未対応の古いブラウザを使っている
- headタグの中、もしくはbodyタグの直前にswiperのCDNを記述していない
swiperが古いブラウザに対応していないので、そもそも「そのブラウザにswiperが対応しているのか」というのを調べる必要があります。
最新ブラウザで動かない場合は、CDNファイルが正しく読み込まれているかチェックしてみましょう。
まとめ
スライドショーはWebサイトに動きを加えるのに有効な手段の一つです。プラグインを使わずに制作することはできますが、初心者には難しい場合があります。その場合であっても、プラグインを使用すれば簡単にスライドショーを実装することができ、制作コストを下げることができます。
この記事で紹介した3つのプラグインにはそれぞれ一長一短あります。
その中でも幅広く使われ、カスタマイズが豊富にあり、情報源にも優れた「slick」プラグインがおすすめであるといえます。幅広く使われている分、slickを使った応用の実装がさまざまあります。
もしslcikの実装で詰まったとしても調べれば解決記事が多数見つかると思います。解決記事が多数見つかるぐらい、slickは使われているので応用しやすいです。
制作の現場でもプラグインを使うことはあるので、実際にプラグインを使って、公式ドキュメントを読んでオプションを組み合わせてカスタマイズしてみましょう！
スライドショープラグインまとめ
- CDNファイルの読み込みに注意する
- 初心者でも簡単にスライドショーを構築することができる
- プラグインの種類によって、さまざまなオプションが使える
- プラグインのバージョン、仕様を確認する
- bxsliderは初心者向きだが、2018年で更新が止まっている
- swiperはjQuery不要で使えるが、公式が英語で使いづらい
- slickはスライドショーのプラグインで最も王道で情報が豊富←オススメ！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
