2014年6月9日 10:43 PM  カテゴリー: javascript, jQuery, web制作, スライドショー

超軽量で実装が簡単で有名なjQueryスライダーのひとつ。使用頻度としてはbxsliderよりも個人的には多いかも。簡単な割にレスポンシブに対応しているしオプションも結構豊富なところが気に入っています。

デモページはこちら

http://gallery-lounge.com/demo/flexslider2/

下記からダウンロード

http://flexslider.woothemes.com/

jQueryの読み込み

jQuery本体は最新バージョンで動かなかったので1.10.2まで落としました。CSSも同梱されているので必要に応じて読み込んでください。

html

javascript

Options

オプションが結構いろいろあります。このデモで使用しているのはanimetion、pauseOnAction、slideshowSpeedの3つだけです。

主なオプション

animation fade/slide スライドかフェイドイン/アウト
slideshow true/false 自動でスライド
slideshowSpeed 7000 スライドのスピード(ミリ秒)
animationDuration 1000 アニメーションのスピード(ミリ秒)
directionNav true/false 戻ると次へのナビゲーション表示
controlNav true/false コントロールナビの有無(下の丸いやつ)
keyboardNav true/false キーボードの画像送り
animationLoop true/false 画像の繰り返し表示
slideToStart 0 スタート時の画像を指定
mousewheel true/false マウスホイールで画像送りの有無
randomize true/false 画像の順番をランダム表示にする

ユーザビリティ関連のオプション

pauseOnActionはfalseに指定しておかないと、次へボタンや戻るボタン、サムネイルをクリックするとスライドショーが停止したままになります。停止状態のままでよい場合はtrueでOKです。

pauseOnAction true/false 操作後の自動再生
pasneOnHover true/false マウスオーバー中の動作
useCSS true/false CSS3のtransition適用の有無
touch true/false タッチ操作の有無(スマホ対応するならtrue)
video true/false 動画をスライダーに組み込むことを許可するかどうか

コントロール関連のオプション

controlNav true/false
directionNav true/false
prevText 戻るボタンの文字。デフォルトはPrevious
nextText 進むボタンの文字。デフォルトはNext

だいたいこのくらいのオプションを把握していればOKだと思いますが更に詳しく知りたい方は本家サイトへ

http://flexslider.woothemes.com/

サムネイル付きバージョン

イメージ画像

スクリーンショット 2014-06-09 22.26.47

デモページへ

デフォルトの設定でスマホのサイズになるとサムネイルが消えます。サムネイルをそのまま残しておきたい場合は下記をCSS追加してください。

html

javascript

サムネイルカルーセルバージョン

サムネイルがカルーセル風にスライドします。

イメージ画像

スクリーンショット 2014-06-09 22.26.23

デモページへ

html

javascript

他にもオプションやら何やら色々と実現が出来ます。本家サイトも参考に研究してみてください。

http://flexslider.woothemes.com/

ABOUT

仕事と子育てを楽しむパパです。 趣味は漫画、映画、海外ドラマ、波乗り、スノボ、カメラ。 最近いけてないけど旅行も大好き。仕事はweb以外にも企業向け技術教育事業、投資、ディレクション、アパレル、写真、店舗プロデュースなどなどなんでもこなします。

Twitter