swipeにも対応したイメージスライダー「jQuery.flex-slider」を試してみた。
iPhoneの方は、QRコードからサンプルをご覧ください。
サンプルはこちらから
えー。。。早速、使い方を説明しちゃいます。
というか、ここに全て説明が書いてあります。
http://flex.madebymufffin.com/
親切すぎて泣けてくる…。
今までのjQueryプラグインと同じように読み込んで、設定を書くだけです。
------------読み込み-------------
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
------------HTMLソース-----------
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>
これだけで動いちゃうわけですが、いろいろ設定が出来るので、それについても触れておきます。
animation: "fade", //"fade" か "slide"でアニメーション設定
slideDirection: "horizontal", // "horizontal" か "vertical" でスライド方向を指定
slideshow: true, // "true" か "false" でスライドショー機能を設定
slideshowSpeed: 7000, // スライドショーの間隔を設定。7000なら７秒（単位：ミリセコンド）
animationDuration: 600, // アニメーションに要する時間を設定（単位：ミリセコンド）
directionNav: true, // [previous]や[next]のナビゲーションを表示するかどうか
（true or false）
controlNav: true, //
keyboardNav: true, // キーボード操作を有効にするかどうか（true or false）
mousewheel: false, // マウスホイール操作を有効にするかどうか（true or false）
prevText: "Previous", // 「戻る」ボタンのテキスト
nextText: "Next", // 「次へ」ボタンのテキスト
pausePlay: false, //
pauseText: 'Pause', // 「一時停止」ボタンのテキスト
playText: 'Play', // 「再生」ボタンのテキスト
randomize: false, // ランダム再生（true or false）
slideToStart: 0, // 一番最初に再生する画像を設定(0なら一番最初の画像から)
animationLoop: true, // ループ再生 (true or false)
pauseOnAction: true, // 制御要素とやり取りするときにスライドショーを一時停止する。
(推奨 true)
pauseOnHover: false, // マウスホバーでスライドショー一時停止（ん？逆か？）
controlsContainer: "", // 複数のナビゲーションを使用しているときにCSSセレクタを設定。
指定が無い場合はデフォルト（class="flexslider"）
manualControls: "", // 上に同じく。これはナビゲーションのCSSセレクタ指定。
start: function(){}, // function(slider):スライダーを読み込んだ時に実行
before: function(){}, // function(slider):スライダーアニメーションが実行される度に実行（？）
after: function(){}, // function(slider):スライダーアニメーションを実行し終わる度に実行（？）
end: function(){} // function(slider):スライダーが最後の画像に達したときに実行（？）
使い方としてはこんな感じで使います。
<script>
var $ = jQuery.noConflict();
$(window).load(function() {
$('.panels_slider').flexslider({
animation: "slide",
directionNav: true,
controlNav: true,
animationLoop: true,
slideToStart: 1,
animationDuration: 300,
slideshow: true
});
});
</script>
要は「 $('.flexslider').flexslider();」のところに
flexslider({設定項目１: 値,設定項目２:値,設定項目３:値…})
みたいな感じで書いていけばいいだけです。
PCサイトでも結構簡単に使えるし、iPhone用サイトでもSwipeに対応しているのでバッチリです。
一つのサイトをメディアクエリで表示している場合なんかにいいかもしれません。
ところで…。
よく「EC-CUBEとかのカスタマイズコードをブログとかに載せちゃっていいんですか？それで食べているでしょうに…」なんて聞かれることがあるのですが、僕はエンジニアとしての究極の目的を「使ってもらうこと」においているので、別に構わないと思ってます。
お金云々はそのあとの問題だと思っているので。
僕はEC-CUBEのカスタマイズコードを無料で掲載しています。
かと思えば、そういったコードを出版物にして販売している人もいるわけで…。
 |
 |
 |
このへんとか、そうですけどね。
というか、なにせこのブログは自分用の備忘録…というかメモなわけで。
僕は結構忘れやすいので、コードをまるっと載せておかないとどう弄ったか思い出せなかったりするので、掲載する…と。
まあ、お仕事でやったカスタマイズコードはさすがに載せられないんですけど、それでも後からコードを見直したりして忘れないように書いたりしてます。