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

実装例

上記のように、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>

ダウンロード

ダウンロードは下記のサイトより行って下さい。

• https://unpkg.com/swiper/

ダウンロードしたファイルのうち、利用するファイルは「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,
	},
});

実装例

上記の設定を行うと、下部にページネーションが表示されます。その他にもページネーションのオプションは多数用意されています。

ナビゲーションボタン

ナビゲーションボタンの設定は下記のとおりです。こちらの設定を行わないとナビゲーションボタンが動作しないため、注意してください。

var mySwiper = new Swiper ('.swiper-container', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
});

実装例

上記の設定を行うと、両端にナビゲーションボタンが表示されます。その他にもナビゲーションボタンのオプションは多数用意されています。

スクロールバー

スクロールバーの設定は下記のとおりです。こちらの設定を行わないとスクロールバーが動作しないため、注意してください。

var mySwiper = new Swiper ('.swiper-container', {
	scrollbar: {
		el: '.swiper-scrollbar',
		draggable: true,
	}
});

実装例

上記の設定を行うと、スクロールバーが画面下部にが表示されます。その他にもスクロールバーのオプションは多数用意されています。

自動再生

自動再生の設定は下記のとおりです。こちらの設定を行わないと自動再生が動作しないため、注意してください。

autoplay: {
	delay: 3000,
}

実装例

上記の設定を行うと、自動再生が実装されます。その他にも自動再生のオプションは多数用意されています。

その他にもSwiperには、ブレークポイントの設定や多様なオプションが用意されています。特に下記のサイトでは非常に詳しく紹介されています。

• Web Design Leaves

コラム カテゴリ

コラム一覧