

そんな疑問にお答えします。
スライダーはプラグインを使えば簡単に実装できます。
いろんなスライダープラグインがありますが、今回はその中でも人気の高い「Swiper」を紹介します。
Swiperは、jQueryに依存しないJavaScriptライブラリです。
レスポンシブ対応可能でカスタマイズの自由度も高いです。
パラメータが豊富で非常に凝ったスライドショーもに簡単に実装できます。
Swiperを自在に操れれば、たいていのスライダーは実装できるはず。
しっかり使い方をマスターしておきましょう。
「Swiper」のメリット・デメリット
まず使い方に入る前にSwiperの特徴や使うことによるメリット・デメリットを見ておきましょう。
- jQueryが不要
- カスタマイズ性に優れている
- レスポンシブ対応していて、スマホイベントのタッチ、スワイプ、タップなども使える
- 古いブラウザには対応していない
- Swiper バージョン5以降はIE対象外
- 公式ドキュメントは英語しかない
「Swiper」の使い方【バージョン7】
それではSwiperの使い方を見ていきましょう。
ライブラリの読み込み
※バージョン7の情報になります。
・Swiper のバージョン7 からHTMLの記述の中で「.swiper-container」が「.swiper」に変更されています。
・昔の解説記事を参考にする場合はクラス名が古いままですので気をつけましょう。
Swiper を使用するには、<head></head>内にCSSと、</body>の前にメインのJavaScriptファイルを読み込みます。
ライブラリ自体をダウンロードするか、CDN経由のどちらでもOKです。
今回はCDNから読み込みます。
公式サイト→Get Startedをクリック
CDNをコピペ
<head></head>に「swiper-bundle.min.css」を、</body>直前に「swiper-bundle.min.js」を設置
CSS<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
基本形
<!-- Swiper START -->
<!-- スライダー全体をくくるメインコンテナ(必須) -->
<div class="swiper">
<!-- 全スライドをまとめるラッパー(必須) -->
<div class="swiper-wrapper">
<!-- 各スライド(必須) -->
<div class="swiper-slide">Slide A</div>
<div class="swiper-slide">Slide B</div>
<div class="swiper-slide">Slide C</div>
<div class="swiper-slide">Slide D</div>
</div>
</div>
<!-- Swiper END -->
var mySwiper = new Swiper('.swiper', {
});
どんなレイアウトであってもこの基本形だけは崩してはいけません。
念のため、HTML全体を貼っておきます。
<!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>DEMO</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
</head>
<body>
<!-- Swiper START -->
<!-- スライダー全体をくくるメインコンテナ(必須) -->
<div class="swiper">
<!-- 全スライドをまとめるラッパー(必須) -->
<div class="swiper-wrapper">
<!-- 各スライド(必須) -->
<div class="swiper-slide">Slide A</div>
<div class="swiper-slide">Slide B</div>
<div class="swiper-slide">Slide C</div>
<div class="swiper-slide">Slide D</div>
</div>
</div>
<!-- Swiper END -->
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script>
var mySwiper = new Swiper(".swiper", {
});
</script>
</body>
</html>
実際に動かすと下のようになります。
左右にスワイプさせるとスライドが切り替わります。
See the Pen
スライダー1 by toshi (@toshi78)
on CodePen.
以上が基本形です。
必ずこの時点で動作確認は行いましょう。
やりがちなのはいろんな機能をつけた上で一度目の動作確認を行うことです。
それで動けば何の問題もありませんが、動かなければ困ったことになります。
どこがエラーの原因なのかがわからなくなるからです。
この時点で動かないのであれば次の理由であることが高いです。
- JS、CSSが正しく読み込めていない
- JSを読み込む順番に誤りがある
- HTML、JSの記述誤り、記述もれ
だいたいは単純なミスであることが多いのでしっかり確認しましょう。
前・次ボタンをつける
基本形だけだとシンプルすぎてスライダーであることがわかりづらいです。
そこで前後にスライドさせるボタンをつけてみます。
<!-- Swiper START -->
<!-- スライダー全体をくくるメインコンテナ(必須) -->
<div class="swiper">
<!-- 全スライドをまとめるラッパー(必須) -->
<div class="swiper-wrapper">
<!-- 各スライド(必須) -->
<div class="swiper-slide">Slide A</div>
<div class="swiper-slide">Slide B</div>
<div class="swiper-slide">Slide C</div>
<div class="swiper-slide">Slide D</div>
</div>
<!-- 前・次ボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->
var mySwiper = new Swiper(".swiper", {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
See the Pen
スライダー2 by toshi (@toshi78)
on CodePen.
スライダーぽくなりました。
次回はいろんなオプション設定を見ていきます。
2022年版】スライダープラグイン「Swiper」の使い方【オプション設定編】
投稿者 トシ
コメントを残す