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

    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数値

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

     

     

    SNSでもご購読できます。