使いやすいjqueryスライダー(レスポンシブ対応)1:FlexSlider 2

2015-04-26

FlexSlider 2

Flex Slider 2
http://flexslider.woothemes.com/index.html

★レスポンシブ対応
★カルーセル対応
★タッチデバイスのフリック対応
★キャプション表示可能
★動画スライドOK
など。

設定できるプロパティも多数です。設置も簡単。

設定できるプロパティの一覧
https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
以下にも記載。ところどころ和訳がおかしいところもあるかもです。

基本的なプロパティ

プロパティ初期値説明
namespace:flex-flexsliderが生成する接頭辞を指定
selector:.slides > liスライドするセレクタを指定
animation:fadeアニメーションのタイプ

"fade" or "slide"

easing:swingjquery transtion を指定
direction:horizontalスライドする方向

"horizontal" or "vertical"

reverse:false真偽値(boolean)

アニメーションの方向を逆行するかどうか

animationLoop:true真偽値(boolean)

アニメーションをループさせるかどうか

smoothHeight:false真偽値(boolean)

horizontal modeのときにスライドのたかさを

startAt:0何番目の要素からスライドをスタートするか
slideshow:true真偽値(boolean)

アニメーションスライドを自動再生するか

slideshowSpeed:7000スライドのスピード(ミリ秒:1/1000)
animationSpeed:600アニメーションのスピード(ミリ秒:1/1000)
initDelay:0スライドをスタートするまでの時間
randomize:false真偽値(boolean)

スライドをランダムでスライドさせる

pauseOnAction:true真偽値(boolean)

コントロール要素を操作している間、スライドを中止するかどうか

pauseOnHover:false真偽値(boolean)

マウスオーバーでスライドを中止するかどうか

useCSS:true真偽値(boolean)

css3対応可能な状況ならcss3トランジョンを使う

touch:trueタッチデバイスでスワイプ動作を可能にするかどうか
video:false真偽値(boolean)

スライドに動画を含むかどうか

スライドのコントロール機能

プロパティ初期値説明
controlNav:trueスライダーナビゲーション(○○○●)を表示するかどうか
directionNav:true両サイドのprev(<),Next(>)を表示するかどうか
prevText:PreviousdirectionNavがtrueの場合の「戻る」のテキスト
nextText:NextdirectionNavがtrueの場合の「次へ」のテキスト

オプション的なナビゲーション機能

プロパティ初期値説明
keyboard:true真偽値(boolean)

キーボードの←→でスライドの移動を可能にするかどうか

multipleKeyboard:true真偽値(boolean)

両サイドのprev(<),Next(>)を表示するかどうか

mousewheel:false真偽値(boolean)

マウスホイールでの移動を許可するかどうか

jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) が必須

pausePlay:false真偽値(boolean)

「再生」「停止」ボタンを表示するかどうか

pauseText:Pause文字列

pausePlay:がtrueの時、「停止」ボタンのテキスト

playText:Play文字列

pausePlay:がtrueの時、「再生」ボタンのテキスト

特別プロパティ

プロパティ初期値説明
controlsContainer:FlexSliderのコンテナー要素「.flexslider-container」
manualControls:コントロール要素を独自の名前をつける


(.flex-control-nav li/#tabs-nav li img)

sync:他のスライダーと同期させる(扱い注意)
asNavFor:Internal property exposed for turning the slider into a thumbnail navigation for another slider

カルーセルオプション

itemWidth:0数値

アイテムの幅サイズ

itemMargin:0数値

アイテム間のマージン

minItems:0数値

アイテムの最小値。画面リサイズ(レスポンシブ)時の下限。画面が小さくなっても表示させるアイテム数

maxItems0数値

アイテムの最大値。画面リサイズ(レスポンシブ)時の上限。大きい画面で表示した場合の最大表示数

move:0数値

カルーセルが動くときに移動するアイテムの数