Writer:Asai (20.09.18)

SwiperはjQueryに依存しない高機能スライダーを実装することができるプラグインです。jQueryに依存しないメリットは処理が遅くなる、ライブラリとの共存が難しいところがある、メンテナンスが必要など多々あります。
実装例
上記のように、jQueryを利用せずに、シンプルなHTMLとJSでスクロールの実装が可能です。Swiperはオプションも多数含まれており、CSSやJavascriptを書き換えることで、色々なシーンで利用できます。
必要なファイルを準備する
Swiperをダウンロード
Swiperを利用する方法として、CDNとファイルダウンロードがあります。
CDN
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
ダウンロード
ダウンロードは下記のサイトより行って下さい。
ダウンロードしたファイルのうち、利用するファイルは「swiper-bundle.min.cssとswiper-bundle.min.js」です。
Swiperの設定
Swiperの基本設定は下記のとおりです。
HTML
<!--Swiper -->
<div class="swiper-container">
<!-- スライド要素を囲むラッパー -->
<div class="swiper-wrapper">
<!-- スライド -->
<div class="swiper-slide"><img src="画像パス"></div>
<div class="swiper-slide"><img src="画像パス"></div>
<div class="swiper-slide"><img src="画像パス"></div>
<div class="swiper-slide"><img src="画像パス"></div>
</div>
<!-- オプション:ページネーション -->
<div class="swiper-pagination"></div>
<!-- オプション:ナビゲーションボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- オプションスクロールバー -->
<div class="swiper-scrollbar"></div>
</div>
Javascript
var mySwiper = new Swiper ('.swiper-container', {
});
上記の設定を行ったあとのスライドショーが下記のとおりです。
上記のサンプルを見てもらってわかるように、見た目は出来上がっていますが、ページネーションや矢印のリンクが効いていません。この部分を動かすためには、ページネーション、ナビゲーションボタン、スクロールバーの設定を行う必要があります。
Swiperのオプション
ページネーション
ページネーションの設定は下記のとおりです。こちらの設定を行わないとページネーションが動作しないため、注意してください。
var mySwiper = new Swiper ('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
});
パラメータ | 説明 |
---|---|
el | ページネーションの要素セレクタ |
type | ページネーションの表示パターン。 bullets、fraction、progressbar、customの中から選択 |
clickable | true指定で、ページネーションのアイコンをクリックすると対応するスライドに移動 |
実装例
上記の設定を行うと、下部にページネーションが表示されます。その他にもページネーションのオプションは多数用意されています。
ナビゲーションボタン
ナビゲーションボタンの設定は下記のとおりです。こちらの設定を行わないとナビゲーションボタンが動作しないため、注意してください。
var mySwiper = new Swiper ('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
パラメータ | 説明 |
---|---|
nextEl | 次ボタンの要素セレクタ |
prevEl | 前ボタンの要素セレクタ |
実装例
上記の設定を行うと、両端にナビゲーションボタンが表示されます。その他にもナビゲーションボタンのオプションは多数用意されています。
スクロールバー
スクロールバーの設定は下記のとおりです。こちらの設定を行わないとスクロールバーが動作しないため、注意してください。
var mySwiper = new Swiper ('.swiper-container', {
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
}
});
パラメータ | 説明 |
---|---|
el | スクロールバーの要素セレクタ |
draggable | true 指定で、スクロールバーをドラッグしてスライドを操作できる |
実装例
上記の設定を行うと、スクロールバーが画面下部にが表示されます。その他にもスクロールバーのオプションは多数用意されています。
自動再生
自動再生の設定は下記のとおりです。こちらの設定を行わないと自動再生が動作しないため、注意してください。
autoplay: {
delay: 3000,
}
パラメータ | 説明 |
---|---|
delay | スライドのスピードを設定 |
実装例
上記の設定を行うと、自動再生が実装されます。その他にも自動再生のオプションは多数用意されています。
その他にもSwiperには、ブレークポイントの設定や多様なオプションが用意されています。特に下記のサイトでは非常に詳しく紹介されています。
コラム執筆中
アイビーネットでは、ホームページに関するコラムを随時執筆中です。