レスポンシブ対応!超軽量jQueryスライダー FlexSlider2

LINEで送る
Pocket

超軽量で実装が簡単で有名な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/

One thought on “レスポンシブ対応!超軽量jQueryスライダー FlexSlider2

  1. […] レスポンシブ対応!超軽量jQueryスライダー FlexSlider2 […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">