jQueryプラグインのFlexSlider2を試してみる
jQueryプラグインのFlexSlider2を試してみる。
FlexSlider 2 http://flexslider.woothemes.com/
※今回はバージョン2.2.2で試しました。
設置
ファイルは下記のような感じで設置する。
├ HTMLファイル ├ flexslider.css ├ jquery.flexslider-min.js ├ fonts │ ├ flexslider-icon.eot │ ├ flexslider-icon.svg │ ├ flexslider-icon.ttf │ └ flexslider-icon.woff └ img ├ 001.png ├ 002.png ├ 003.png └ ・・・
基本
基本的には下記のような感じでHTMLを書く。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <link href="flexslider.css" rel="stylesheet"> <script src="jquery.flexslider-min.js"></script> <script> $(function(){ $('.flexslider').flexslider({ }); }); </script> </head> <body> <div class="flexslider"> <ul class="slides"> <li><img src="img/001.png" /></li> <li><img src="img/002.png" /></li> <li><img src="img/003.png" /></li> <li><img src="img/004.png" /></li> <li><img src="img/005.png" /></li> </ul> </div> </body> </html>
マウスホイール対応
mousewheelをtrueにすると、一応ホイールでスライドする。
$('.flexslider').flexslider({ animation: "slide", itemWidth: 300, mousewheel: true });
サムネイル付き
サムネイル付きのスライドショーにしたい場合は、下記のような感じで書く。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <link href="flexslider.css" rel="stylesheet"> <script src="jquery.flexslider-min.js"></script> <script> $(function(){ $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); </script> </head> <body> <div class="flexslider"> <ul class="slides"> <li data-thumb="img/001.png"><img src="img/001.png" /></li> <li data-thumb="img/002.png"><img src="img/002.png" /></li> <li data-thumb="img/003.png"><img src="img/003.png" /></li> <li data-thumb="img/004.png"><img src="img/004.png" /></li> </ul> </div> </body> </html>