AdaptorとはイメージをスライドするためのjQueryプラグインです。
切り替え時のエフェクトの種類が豊富であり、表示時間がプログレスバーで表示されるなどの機能もあります。
スライド時のエフェクトの種類が多いのは特に魅力的ですね。
様々な種類のプラグインが存在しますが、これはその中でも使いやすのではないでしょうか。
ダウンロードはGithubから行えます。
サンプルが用意されているため、index.htmlを見ることで使用方法が分かると思います。
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();
});
});