[JS]普通のかっこいいスライドから、予想の斜め上いく3Dのアニメーションにも対応したコンテンツスライダー -Adaptor

シンプルなインターフェイスに、スライド時にさまざまなエフェクトが用意されたコンテンツスライダーを実装するjQueryのプラグインを紹介します。

下記キャプチャのエフェクトは3Dで、くるっぐい～ん、って感じです。

Adaptor, a jQuery 3D content slider

• Adaptorのデモ
• Adaptorの使い方

Adaptorのデモ

コンテンツスライダーの対応ブラウザは、IE6を含むすべてのモダンブラウザです。
3DのエフェクトはFirefox, Chrome, Safariのみで、他のブラウザで表示した際はフェードのエフェクトになります。

デモページ

デモではスライド時のエフェクトが7種類、用意されています。

スライドのエフェクト

Adaptorの使い方

実装は3ステップです。

Step1: 外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/box-slider-all.jquery.min.js"></script>

Step2: HTML

各パネルはfigure要素で実装し、div要素で内包します。

<div class="slider-viewport"><!-- works as a viewport for the 3D transitions -->
  <div id="content-box"><!-- the 3d box -->
    <figure><!-- slide -->
      <img src="img/slide-1.png">
      <figcaption>This is slide one's description</figcaption>
    </figure>
    <figure>
      <img src="img/slide-2.png">
      <figcaption>This is slide two's description</figcaption>
    </figure>
    <figure>
      <img src="img/slide-3.png">
      <figcaption>This is slide three's description</figcaption>
    </figure>
    <figure class="slide">
      <img src="img/slide-4.png">
      <figcaption>This is slide four's description</figcaption>
    </figure>
  </div>
</div>

Step3: JavaScript

jQueryのセレクタでラッパーを指定し、スクリプトを実行します。

$('#content-box').boxSlider( /* オプション */ );

スクリプトのオプション

オプションではスライド時のさまざまな設定ができます。

speed (default: 800)

スライドのアニメーションのスピード

autoScroll (default: false)

スライドの自動スクロールの有無

timeout (default: 5000)

スライドの移行時の時間

pause (default: null)

ポーズ時の設定

pauseOnHover (default: false)

ホバー時の設定

next (default: null)

次へのjQueryのセレクタ

prev (default: null)

前へのjQueryのセレクタ

effect (default: 'scrollVert3d')

エフェクトの種類

オプションを使用すると、下記のようになります。

$box.boxSlider({
speed: 1000
	, autoScroll: true
	, timeout: slideInterval
	, next: '#next'
	, prev: '#prev'
	, pause: '#pause'
	, effect: 'scrollVert3d'
	, blindCount: 25
	, onbefore: switchIndicator
	, onafter: startTimeIndicator
});