jQueryを使わないSwiperの使い方【高機能スライダーを簡単に実装する方法】

Writter: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には、ブレークポイントの設定や多様なオプションが用意されています。特に下記のサイトでは非常に詳しく紹介されています。

コラム執筆中

アイビーネットでは、ホームページに関するコラムを随時執筆中です。

コラム カテゴリ