Setup
This example shows how captions can be configured to provide custom animations. See the captionsSetup below for customization options. Also, note that custom callback functions are used to customize captions behavior.
Add the following code in the head section of your HTML document to see the slider in action.
<link href="css/quake.slider.css" rel="stylesheet" type="text/css" />
<link href="skins/dark-room/quake.skin.css" rel="stylesheet" type="text/css"/>
<script src="js/quake.slider-min.js" type="text/javascript"></script>
$(document).ready(function () {
$('.quake-slider').quake({
effects: ['slabs','blind', 'blindHorizontal', 'barsUp', 'barsDown', 'barsDownReverse',
'blindFade', 'fallingBlindFade', 'raisingBlindFade', 'mixBars', 'mixBarsFancy','blindFadeReverse', 'slideIn',
'slideInFancy', 'slideInReverse', 'chop', 'chopDimensions', 'chopDiagonal', 'chopDiagonalReverse' ],
thumbnails: true,
animationSpeed: 500,
applyEffectsRandomly: false,
navPlacement: 'outside',
navAlwaysVisible: true,
captionOpacity: '0.3',
captionsSetup: [
{
"orientation": "top",
"slides": [0, 1],
"callback": captionAnimateCallback
},
{
"orientation": "left",
"slides": [2, 3],
"callback": captionAnimationCallback1
}
,
{
"orientation": "bottom",
"slides": [4, 5],
"callback": captionAnimateCallback
}
,
{
"orientation": "right",
"slides": [6, 7],
"callback": captionAnimationCallback1
}
]
});
function captionAnimateCallback(captionWrapper, captionContainer, orientation) {
captionWrapper.css({ left: '-990px' }).stop(true, true).animate({ left: 0 }, 500);
captionContainer.css({ left: '-990px' }).stop(true, true).animate({ left: 0 }, 500);
}
function captionAnimationCallback1(captionWrapper, captionContainer, orientation) {
captionWrapper.css({ top: '-330px' }).stop(true, true).animate({ top: 0 }, 500);
captionContainer.css({ top: '-330px' }).stop(true, true).animate({ top: 0 }, 500);
}
});
});
