Adaptor エフェクトの種類が豊富なjQueryスライダー

2013/10/04

Adaptorの紹介

AdaptorとはイメージをスライドするためのjQueryプラグインです。
切り替え時のエフェクトの種類が豊富であり、表示時間がプログレスバーで表示されるなどの機能もあります。

スライド時のエフェクトの種類が多いのは特に魅力的ですね。
様々な種類のプラグインが存在しますが、これはその中でも使いやすのではないでしょうか。

ダウンロードはGithubから行えます。
サンプルが用意されているため、index.htmlを見ることで使用方法が分かると思います。

デモ
Github

script サンプル

javaScriptは以下のようになっています。


$(function () {

    var $box = $('#box')
      , $indicators = $('.goto-slide')
      , $effects = $('.effect')
      , $timeIndicator = $('#time-indicator')
      , slideInterval = 5000
      , effectOptions = {
          'blindLeft': {blindCount: 15}
        , 'blindDown': {blindCount: 15}
        , 'tile3d': {tileRows: 6, rowOffset: 80}
        , 'tile': {tileRows: 6, rowOffset: 80}
      };

    // This function runs before the slide transition starts
    var switchIndicator = function ($c, $n, currIndex, nextIndex) {
      // kills the timeline by setting it's width to zero
      $timeIndicator.stop().css('width', 0);
      // Highlights the next slide pagination control
      $indicators.removeClass('current').eq(nextIndex).addClass('current');
    };

    // This function runs after the slide transition finishes
    var startTimeIndicator = function () {
      // start the timeline animation
      $timeIndicator.animate({width: '680px'}, slideInterval);
    };

    // initialize the plugin with the desired settings
    $box.boxSlider({
        speed: 1000
      , autoScroll: true
      , timeout: slideInterval
      , next: '#next'
      , prev: '#prev'
      , pause: '#pause'
      , effect: 'scrollVert3d'
      , onbefore: switchIndicator
      , onafter: startTimeIndicator
    });

    startTimeIndicator(); // start the time line for the first slide

    // Paginate the slides using the indicator controls
    $('#controls').on('click', '.goto-slide', function (ev) {
      $box.boxSlider('showSlide', $(this).data('slideindex'));
      ev.preventDefault();
    });

    // This is for demo purposes only, kills the plugin and resets it with 
    // the newly selected effect FIXME clean this up!
    $('#effect-list').on('click', '.effect', function (ev) {
      var $effect = $(this)
        , fx = $effect.data('fx')
        , extraOptions = effectOptions[fx];

      $effects.removeClass('current');
      $effect.addClass('current');
      switchIndicator(null, null, 0, 0);

      if (extraOptions) {
        $.each(extraOptions, function (opt, val) {
          $box.boxSlider('option', opt, val);
        });
      }

      $box.boxSlider('option', 'effect', $effect.data('fx'));

      ev.preventDefault();
    });

});
  • このエントリーをはてなブックマークに追加
Related

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...
トップへ戻る