jquery.flexslider.jsを使ってスマホやタブレットのスワイプ(swipe)に対応した画像スライダーを表示する方法ご紹介します。
Contents
ディスプレイ広告
スワイプ(swipe)に対応した画像スライダーのCSSの記述
※flexslider.cssファイルを読み込みます。.flexsliderが画像スライダーエリアです。その他必要に応じて変更して下さい。
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<style>
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>
jquery.flexslider.jsを使ったスワイプ(swipe)に対応した画像スライダーのJavaScriptの記述
※jquery.min.jsとjquery.flexslider.jsファイルを読み込みます。画像スライダーエリア(.flexslider)に$(‘.flexslider’).flexslider({オプション})でスライドのアニメーション方法等を設定します。
<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>
スワイプ(swipe)に対応した画像スライダーのHTMLの記述
※画像スライダーエリアclass=”flexslider”内にclass=”slides”を子要素として、スライドする画像をliタグで複数用意します。
<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-->
jquery.flexslider.jsを使ってスワイプ(swipe)に対応した画像スライダーを表示するデモページ
jquery.flexslider.jsを使ってスワイプ(swipe)に対応した画像スライダーを表示するデモ
スマホ、タブレット対応としてスワイプ(swipe)は必要ですよね。
ソース元:FlexSlider
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。