jquery.flexslider.js:スワイプ(swipe)に対応した画像スライダー
- 2019.05.29
- JavaScript jQuery
- jquery.flexslider.js, slider, swipe, スワイプ, 画像スライダー

スマホでの左右スワイプ(swipe)に対応した画像スライダーです。
1.読込むCSSファイルとCSSの記述例
<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>
2.読込むJsファイルとJavaScriptの記述例
<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>
3.HTMLの記述例
<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>
jquery.flexslider.jsを使ってスワイプ(swipe)に対応した画像スライダーを表示するデモ
スマホ、タブレット対応として必要ですね。
-
前の記事
URLにハッシュ(#)を付けたり・取得したり操作する方法 2019.05.28
-
次の記事
jquery.tinyscrollbar:カスタムスクロールバーを表示するJs 2019.05.30