JavaScript

jquery.flexslider.jsを使ってスワイプ（swipe）に対応した画像スライダーを表示する方法

  /

この記事では、jQueryのプラグインであるjquery.flexslider.jsを使用して、スマートフォンやタブレットのスワイプ（swipe）操作に対応した画像スライダーを作成する方法を紹介します。
スマートフォンやタブレットの普及により、スワイプ操作は非常に重要な要素となっており、ユーザーエクスペリエンスを向上させるためにも、対応が必須です。

Contents

スワイプ（swipe）に対応した画像スライダーのCSSの記述

まず、スライダーを表示するためのCSSを記述します。flexslider.cssファイルを読み込み、スライダーのスタイル.flexsliderを設定します。以下のコードをHTMLファイルに追加してください。

<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.clWrap{
	width:800px;
	margin:0 auto;
	text-align:left;
}
.flexslider{
	width:300px;
	height:300px;
	margin:0 auto;
}
</style>

　
このスタイルシートでは、clWrapクラス、flexsliderクラスのスタイルを設定しています。flexsliderクラスが画像スライダーのエリアとなります。

jquery.flexslider.jsを使ったスワイプ（swipe）に対応した画像スライダーのJavaScriptの記述

次に、JavaScriptを使用してスライダーを動作させます。jquery.min.js（1.7.1）とjquery.flexslider.jsを読み込み、画像スライダーエリア（.flexslider）に$(‘.flexslider’).flexslider({オプション})でスライドのアニメーション方法等を設定します。
以下のコードをHTMLファイルに追加してください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script defer src="jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
	$('.flexslider').flexslider({
		animation: "slide",
		start: function(slider){
			$('body').removeClass('loading');
		}
	});
});
</script>

　
このスクリプトでは、ページがロードされた後に.flexsliderクラスの要素をスライダーとして初期化し、スライドアニメーションを設定します。

スワイプ（swipe）に対応した画像スライダーのHTMLの記述

画像スライダーのHTML構造を作成します。class=”flexslider”内にclass=”slides”を子要素として、スライドする画像をliタグで複数用意します。以下のコードをHTMLファイルに追加してください。

<div class="clWrap">
    <h1>複数の画像が左右にスライドします。<br />スマホで閲覧の際は左右に指でスワイプすると画像がスライドします。</h1>

        <div class="flexslider">
          <ul class="slides">
            <li><img src="i1.jpg" alt="画像1" /></li>
            <li><img src="i2.jpg" alt="画像2" /></li>
            <li><img src="i3.jpg" alt="画像3" /></li>
            <li><img src="i4.jpg" alt="画像4" /></li>
            <li><img src="i5.jpg" alt="画像5" /></li>
          </ul>
        </div>

</div><!--/clWrap-->

　
このHTML構造では、clWrapクラスで全体のラップを作成し、その中に見出しとスライダーを配置しています。flexsliderクラス内にslidesクラスを持つul要素を配置し、その中にスライドする画像をli要素で追加しています。

jquery.flexslider.jsを使ってスワイプ（swipe）に対応した画像スライダーを表示するデモページ

次に、実際に動作するデモページを紹介します。こちらのリンクから、実際に動作するスライダーを確認できます。

jquery.flexslider.jsを使ってスワイプ（swipe）に対応した画像スライダーを表示するデモ

スマートフォンやタブレットでアクセスすると、スワイプ操作で画像がスライドする様子を確認できます。

ソース元：FlexSlider

FlexSliderの詳細については、公式サイトを参照してください。

FlexSlider

まとめ

以上で、jquery.flexslider.jsを使用して、スマートフォンやタブレットのスワイプ操作に対応した画像スライダーの作成方法を紹介しました。CSSでスタイルを設定し、JavaScriptでスライダーを初期化し、HTMLで構造を作成する手順を解説しました。これにより、ユーザーエクスペリエンスを向上させることができます。
スワイプ対応の画像スライダーを導入することで、モバイルユーザーにも優しいサイト作りが可能になります。

このチュートリアルが皆さんのお役に立てば幸いです。ぜひ試してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

jquery.flexslider.js 画像スライダー slider スワイプ swipe
RELATED POST