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();
});
});