ブログBLOG

[jQueryプラグイン]いろいろなアニメーションが用意されたコンテンツスライダー | Adaptor, a jQuery 3D content slider

更新日：2013/01/07

jQuery を利用したコンテンツスライダーはいろいろな方法やいろいろなプラグインがありますが、CSSの 3Dプロパティを使ったエフェクトを選べるプラグインを紹介します。

Adaptor, a jQuery 3D content slider

デモページ
 GitHub

現時点では9種類のエフェクトが用意されています。また IEでは CSSの 3Dプロパティに対応していませんが、対応していないブラウザに 3Dエフェクトを指定した場合はフェードなどが自動で適用されます。

■使い方

jQuery 本体とプラグインを読み込み


&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="js/box-slider-all.jquery.min.js"&gt;&lt;/script&gt;

HTML では [ figure ] タグでコンテンツを囲み、下部にインジケータを表示する [ div ] を用意


&lt;div class="slider-viewport"&gt;
  &lt;div id="content-box"&gt;
    &lt;figure&gt;
      &lt;img src="img/slide-1.png"&gt;
      &lt;figcaption&gt;This is slide one's description&lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;figure&gt;
      &lt;img src="img/slide-2.png"&gt;
      &lt;figcaption&gt;This is slide two's description&lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;figure&gt;
      &lt;img src="img/slide-3.png"&gt;
      &lt;figcaption&gt;This is slide three's description&lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;figure class="slide"&gt;
      &lt;img src="img/slide-4.png"&gt;
      &lt;figcaption&gt;This is slide four's description&lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/div&gt;
  &lt;div id="time-indicator"&gt;&lt;/div&gt;
&lt;/div&gt;

<figcaption>This is slide one's description</figcaption>

</figure>

<figcaption>This is slide two's description</figcaption>

</figure>

<figcaption>This is slide three's description</figcaption>

</figure>

<figcaption>This is slide four's description</figcaption>

</figure>

</div>

</div>

CSS ではインジケータの色やサイズを指定


#time-indicator {
    width: 0;
    height: 3px;
    background: #C5923F;
    position: absolute;
    bottom: -3px;
}

#time-indicator {

width: 0;

height: 3px;

background: #C5923F;

position: absolute;

bottom: -3px;

}

Script はインジケータ開始と停止の処理を用意しオプションで指定


var $timeIndicator = $('#time-indicator');
var indicatorWidth = $('#content-box').width();
var timeoutVal = 7500;

var indicatorStart = function () {
  $timeIndicator.animate({ width: indicatorWidth }, timeoutVal);
};

var indicatorEnd = function () {
  $timeIndicator.stop().css({ width: '0' });
};

$('#content-box').boxSlider({
  autoScroll: true
  , speed: 1000
  , timeout: timeoutVal
  , effect: 'scrollHorz3d'
  , onbefore: indicatorEnd
  , onafter: indicatorStart
});
indicatorStart();

var $timeIndicator = $('#time-indicator');

var indicatorWidth = $('#content-box').width();

var timeoutVal = 7500;

var indicatorStart = function () {

$timeIndicator.animate({ width: indicatorWidth }, timeoutVal);

};

var indicatorEnd = function () {

$timeIndicator.stop().css({ width: '0' });

};

$('#content-box').boxSlider({

autoScroll: true

, speed: 1000

, timeout: timeoutVal

, effect: 'scrollHorz3d'

, onbefore: indicatorEnd

, onafter: indicatorStart

});

indicatorStart();

ここでは下記のオプションを例にしました。

autoScroll
　　　自動スクロールの有無
speed
　　　コンテンツ切り替えのスピード
timeout
　　　コンテンツを表示している時間
effect
　　　エフェクトの種類
onbefore
　　　切り替え開始前のイベント
onafter
　　　切り替え完了後のイベント