jquery.grslider

動作サンプル

    オプションを変更 grslider.cssjquery.grslider.js

    オプション

    • auto
      //自動再生

      true or false or 自動再生回数
      自動再生回数は、最後の要素の表示回数です。手動で最後の要素を表示した場合にも数えられます。
      loop: falseのときは、最後の要素で停止し、他の要素を表示することで再度自動再生が始まります。

    • changeTime
      //自動再生間隔

      スライダー内の要素にdata-change-time="ミリ秒"を指定することで、個別に間隔を設定できます。
      showNumが2以上かつmoveAll: trueの場合は、それぞれの先頭要素に指定します。 要素が6で、showNum: 2, moveAll: trueの場合、1番目、3番目、5番目に設定された値が参照されます。

    • slideTime
      //スライド効果時間
    • loop
      //繰り返し
    • type
      //スライド形式
    • initNum
      //初期表示スライド番号
    • showNum
      //表示スライド数
    • moveAll
      //表示分まとめてスライド
    • slideEase
      //スライド効果
    • direction
      //スライド方向
    • paging
      //前後ボタン有無
    • nav
      //ナビ有無
    • changeClass
      //クラス変更

      ['class name', スライド番号(, スライド番号 ...)]
      or
      ['class name', [除数, 余り]]
      例:['blk', 1, 3]

    • overflow
      //前後をはみ出して表示
    • flickable
      //フリック操作

      nofollowにすると、フリック時に要素が追従しなくなります。type: 'fade'の場合はtrueでも追従しません。
      ※type: 'flip'かつ表示スライド数が2以上の場合、cssのperspectiveによって各要素の見え方が変わります。

    • loader
      //ローディング演出

      スライダー内に画像がある場合、それらの画像が読み込み終わった時点でスライダーになります。
      ローディング画面の動作は当サイトのトップページを御覧ください。

    • beforeSlide
      //スライド前の実行関数

      false or function(slider, current{idx:数値, $:jQueryオブジェクト}, next{idx:数値, $:jQueryオブジェクト}, deferred){}
      処理終了箇所に deferred.resolve(); を記述してください。
      ※初回表示時、リサイズ時は実行されません。
      関数ありサンプル 関数なしサンプル

    • afterSlide
      //スライド後の実行関数

      false or function(slider, current{idx:数値, $:jQueryオブジェクト}, deferred){}
      処理終了箇所に deferred.resolve(); を記述してください。
      関数ありサンプル 関数なしサンプル

    サンプルを更新

    更新履歴

    • Version 2.3.0を公開。自動再生回数の指定、各要素ごとの自動再生間隔の指定、スライド前後での関数実行が可能になりました。フリック操作に'nofollow'を追加しました。
    • Version 2.2.0を公開。基本動作をcss3に修正しました。ブラウザ未対応時はjQueryで動作します。cssも微修正しました。
    • Version 2.1.1を公開。ローディング画面の円がIE11でも表示されるように修正しました。
    • Version 2.1.0を公開。ローディング画面機能を追加しました。
    • Version 2.0.0を公開。