v8の解説記事となります
・Swiperってどうやって使うの？
こんな疑問にお答えします。
「Swiper」とはスライダーが作れるJavaScriptライブラリのこと。
要素をスライドさせるような実装を手軽にできます。
めちゃくちゃ簡単に実装可能です。
すぐにできるよ！
ということで、この記事では「Swiperの使い方」について解説していきます！
・Swiperのメリット｜デメリット
・Swiperの使い方【準備編】
・Swiperの使い方【実行編】
・Swiperの使い方【オプション】
目次
【解説】Swiperのメリット｜デメリット
Swiperを使う前にメリット・デメリットを知っておくべし。
・jQueryを使わない
・レスポンシブ対応可能
・カスタマイズ性が高い
・古いブラウザには非対応
・バージョン5.0以降はIEに非対応
・公式ドキュメントの解説が英語
SwiperはjQueryに依存せずに利用できるため、脱jQueryを用いたサイトを作るときには重宝するでしょう。
【解説】Swiperの使い方【準備編】
「Swiper」を使うために、まずは下記の準備をしていきましょう。
- ファイルをダウンロード
- 必要なファイルのみ読み込む
順に解説していきます。
まずは「Swiper」を使うためのファイルをダウンロードしていきます。
赤丸で囲んだ「ダウンロードアイコン」をクリックして、tgzファイルをダウンロードしましょう。
tgzファイルを解凍すると、「package」が表示されるのでクリック。
たくさんのファイルが中に入っていますが、実際に必要なのは2つだけ。
- 「swiper-bundle.min.js」
- 「swiper.min.css」もしくは「swiper-bundle.min.css」
cssはこの2つのどちらかを利用すればOK。
「swiper.min.css」は必要最低限のCSSが記述されているファイル。
「swiper-bundle.min.css」は最初からある程度のCSSが記述されていて、スライダー装飾ができているファイル。
オリジナルにカスタマイズしたい人は、「swiper.min.css」を使うのがオススメです。
HTMLにて下記コードを記載し、ファイルを読み込みます。パスは自分のフォルダ位置に合わせて変えましょう。
<!-- css -->
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
<!-- js -->
<script type="text/javascript" src="./swiper/swiper-bundle.min.js"></script>この記事では「swiper-bundle.min.css」を使うよ！
【解説】Swiperの使い方【実行編】
続いてSwiperを実行していく使い方を紹介していきます。
まずデモがこちら↓
See the Pen ➀swiper 使い方 by jito-coder (@jito-coder) on CodePen.
01の要素を左右にスワイプすれば、スライドされるかと思います。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide01">01</div>
<div class="swiper-slide swiper-slide02">02</div>
<div class="swiper-slide swiper-slide03">03</div>
</div>
</div>.swiper {
max-width: 1000px;
margin: 50px auto;
}
.swiper-slide {
font-size: 50px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 350px;
}
.swiper-slide01 {
background: orange;
}
.swiper-slide02 {
background: pink;
}
.swiper-slide03 {
background: skyblue;
}const swiper = new Swiper(".swiper", {
loop: true
});コードの意味として重要な点がこちら↓
- 必須クラスを使いHTMLを組み立てる
- CSSで幅や色などを調整
- javascriptでイベントを実行
順に解説していきます。
まず必須クラスを使いHTMLを組み立てましょう。
ぶっちゃけ、ここが一番重要なポイントです。
<!-- 親要素 -->
<div class="swiper">
<!-- 各スライドを囲む要素 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>| swiper | 全体を囲む親要素 |
| swiper-wrapper | 各スライド達を囲む親要素 |
| swiper-slide | 各スライド達 |
上記で使われているクラス名＋位置をそのまま使用しましょう。
「.swiper」に関しては任意名で良いですが、念のため必須で利用するのがオススメです。
タグの位置やクラス名が異なると、上手く動かなくなります。。
そのためHTMLの組み立てがSwiperにとっては一番重要かと。
CSSにて見た目を調整してカスタマイズしていく感じです。
要素のインナー幅を指定する場合、.swiperに指定します。
.swiper {
max-width: 1000px;
}あとはJavaScriptにてイベント実行の記述をするだけ。
書き方は下記になります。
const swiper = new Swiper(".swiper", {});これだけでSwiperによるスライド実装が完成！
僕が実装したとき、先述したJavaScriptにコードを記述しても上手く動かない沼にはまりました。
対策としては下記らのように、記述方法を変えれば実装できました。
window.addEventListener('DOMContentLoaded', function() {
const swiper = new Swiper(".swiper", {});
}, false);もしくはこちら↓
window.onload = function() {
const swiper = new Swiper(".swiper", {});
}【解説】Swiperの使い方【オプション・カスタマイズ】
Swiperにはオプションがあり、パラメーターをつけることでカスタマイズが可能です。
ということで最後に下記を紹介します。
- オプション
順に見ていきましょう。
オプションの指定は下記の感じ↓
const swiper = new Swiper(".swiper", {
// ここにパラメーターを書いていく
});const swiper = new Swiper(".swiper", {
パラメータ: 値,
パラメータ: 値,
パラメータ: 値,
});オプションの種類に関しては「公式サイト」にて詳しく書いてあります。
その中でも良く使いそうなのが下記ですね↓
| loop | スライドを繰り返す |
| rewind | スライドを巻き戻す |
| slidesPerView | スライドの表示数を指定 |
| spaceBetween | スライド同士の遷移距離 |
| speed | スライドの遷移スピード |
| effect | スライド切替時の動き |
【簡単】Swiperの使い方｜初心者向けに解説【オプション】：まとめ
- jQueryを使わない
- 「swiper-bundle.min.js」を使う
- 「swiper.min.css」もしくは「swiper-bundle.min.css」を使う
- 必須クラス、指定位置を合わして組立てる
- JavaScriptでイベント実装。オプションを使うことでカスタマイズ可能。
「Swiper」は便利なので使い方を覚えておこう！
