【最新バージョン7.3対応】jQuery無しで動く神スライダー［Swiper］が便利すぎて。

今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。

初見の感想は「反応速度が早く軽量でサクサク動く」という印象。
レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。

機能が豊富で、ざっと紹介すると以下のとおり。

• レスポンシブ対応
• フルスクリーン化OK
• ページネーション設置
• 縦方向のスライド
• カルーセル・モード
• 各スライドの位置を固定しない「フリーモード」対応
• 複数行のスライドに対応
• 縦方向・横方向の「入れ子」に対応
• マウスのドラッグ操作に対応
• スクロールバー表示
• ナビゲーションボタン表示
• 無限ループ対応
• フェードイン・フェードアウトによるスライドの切り替え
• 3D キューブ・エフェクト
• 3D カバーフロー・エフェクト
• キーボード・コントロール
• マウスホイールによる操作可能
• 自動再生
• サムネイル表示
• パララックス効果導入
• スライド画像の遅延読み込み（Lazy Load）対応

オプション設定でこれだけの機能が使えるようになります。
……圧倒的な量ですよね。

まずは実際に［Swiper］を導入したサンプルページをご覧ください。

Swiper：実装サンプル

こちらのサンプルではフルスクリーン化し、パララックス効果を追加してみました。
よくある画像ベースのスライダーではなく、『コンテンツ・スライダー』という位置付けなので、テキストはもちろん、画像でも動画でも何でも組み込むことが可能です。

導入方法は以下より。

Swiper の実装方法

最初に公式サイトから必要なファイル一式をダウンロードしてきます。

公式サイト：Swiper - Most Modern Mobile Touch Slider

ヘッダー部分にある「Download」をクリックするとスグにダウンロードがはじまります。

ダウンロードしたファイルのうち、主に利用するのは以下の２つ。

• swiper.js
• swiper.css

上記それぞれのファイルを圧縮した「swiper.min.js」と「swiper.min.css」というファイルも梱包されています。
データ容量を小さくしたければコチラの圧縮されたファイルを使いましょう。
これらのファイルをHTMLの任意の箇所で読み込むようにします。

<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script>

嬉しいことにjQueryに依存しないので「swiper.js」を読み込むだけでスクリプトが動きます。

スライド・コンテンツ部分の作成

次に［Swiper］でスライドショーにするコンテンツ部分を作り込んでいきます。
基本的なhtmlコードは以下のとおり。

<div class="swiper-container">
	<ul class="swiper-wrapper">
		<li class="swiper-slide"> 
			<!-- Slide-01　コンテンツを挿入する -->
		</div>
		<li class="swiper-slide">
			<!-- Slide-02　コンテンツを挿入する -->
		</li>
		<li class="swiper-slide"> 
			<!-- Slide-03 コンテンツを挿入する -->
		</li>
	</ul>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-scrollbar"></div>
</div>

スライダー部分全体を<div class="swiper-container"> 〜 </div>で囲い、その中にclass="swiper-wrapper"と名付けたボックス要素を設置。
各スライド部分にはclass="swiper-slide"を記述します。

同様に、ページネーションはclass="swiper-pagination"を。
前後にスライドさせるボタンはclass="swiper-button-prev"とclass="swiper-button-next"を。
スクロールバーはclass="swiper-scrollbar"を、それぞれ記述することで表示されるようになります。

初期化

次に、ページがロードされたときに［Swiper］を実行するための初期化の処理を記述します。

基本の書式は以下。

<script>
var swiper = new Swiper('.swiper-container');
</script>

任意のclassまたはidを名付けた要素に聞かせたい場合は .swiper-container の箇所を書き換えます。
ちなみに先に紹介したサンプルでは次のようにオプションを指定しています。

<script>
	var swiper = new Swiper('.swiper-container', {
		pagination: '.swiper-pagination',
		paginationClickable: true,
		parallax: true,
		speed: 600,
	});
</script>

基本的にはここまでの設定で動くようになります。

オプション設定一覧

［Swiper］では考え得る限りのあらゆる設定を細かく指定することができます。

……あまりにも数が多すぎるので、公式サイトの［API］を直接読んでしまったほうが早いかもしれません。

Swiper：API

メインのオプション

フリーモードとスクロールコンテナ関連

スライドのオフセット関連

タッチ、マウスの操作関連

ナビゲーション

ページネーション

ネームスペース

コールバック関数

未翻訳・未検証の部分もありますが、これでほぼすべての設定項目を網羅しています。膨大な量ですが、これでいくらでも好きなようにカスタマイズできますね！

コンテンツ・スライダー［Swiper］のダウンロードは以下よりどうぞ。

公式サイト：Swiper - Most Modern Mobile Touch Slider