
SliderWall uses a set of eye-catching effects to transition from one slide to another. These effects are all created with JavaScript and require HTML5 compatible browsers to work (Firefox, Chrome, Safari, IE9+).
Note: Some of the effects are CPU intensive and will not work correctly on mobile devices such as iPhone and iPad. For mobile deployment we recommend using iPad compatible effects Alpha and Slide which are less CPU intensive. By setting the optimizeForIpad property of the slider transition (transitionType parameter) to true, the slider will only use the effects that are compatible with mobile devices.
There are other effects that work well on mobile devices like iPad (Disc, FlipBars, Iris, LensGlare) but we recommend using them with images that are not larger than 800 x 600 pixels.
Alpha
iPad compatible
Works with all types of content (image, Flash clip, HTML content).
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 0.75). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeInOut). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
AlphaBars
Works only with images.
barWidth:Number |
The width of the transparent bars used by the transition effect. The width is measured in pixels and any decimal values will be rounded up to integer values (default 50). |
direction:String |
The direction of the transition effect. Possible values are l2r (left to right), r2l (right to left), t2b (top to bottom) and b2t (bottom to top) (default l2r). |
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeOut). |
random:Boolean |
If set to true, allows the transition to be applied on a random direction (default false). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
BrightSquares
Works only with images.
direction:String |
The direction of the transition effect. Possible values are tl2br (top-left to bottom-right), bl2tr (bottom-left to top-right), tr2bl (top-right to bottom-left) and br2tl (bottom-right to top-left) (default tl2br). |
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeOut). |
random:Boolean |
If set to true, allows the transition to be applied on a random direction (default false). |
tileHeight:Number |
The height of the tiles (in pixels) that compose the effect (default 100). |
tileWidth:Number |
The height of the tiles (in pixels) that compose the effect (default 100). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
Disc
Works only with images.
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeInOut). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
FlipBars
Works only with images.
Note: works on iPad with images up to 800 x 600 pixels.
barWidth:Number |
The width of the bars (in pixels) composing the transition effect (default 80). |
direction:String |
The direction of the transition effect. Possible values are l2r (left to right), r2l (right to left), t2b (top to bottom) and b2t (bottom to top) (default l2r). |
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeOut). |
random:Boolean |
If set to true, allows the transition to be applied on a random direction (default false). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
Iris
Works only with images.
Note: works on iPad with images up to 800 x 600 pixels.
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeInOut). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
LensGlare
Works only with images.
Note: works on iPad with images up to 800 x 600 pixels.
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeOut). |
gradientWidth:Number |
The size (in pixels) of the gradient used by the lens glare effect (default 100). |
lightDirection:Boolean |
The direction of the light. If set to true, the light will move from right to left, otherwise it will move from left to right (default true). |
lightOffset:Number |
The position of the light (in pixels) on the Y coordinate. 0 is the center of the target slide (default 0). |
margins:Number |
The distance (in pixels) between the target's margins and the light (default 20). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
Slide
iPad compatible
Works with all types of content (image, Flash clip, HTML content).
direction:String |
The direction of the slide effect. Possible values are horizontal and vertical (default horizontal). |
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 0.75). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeInOut). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
SquareFade
Works only with images.
direction:String |
The direction of the transition effect. Possible values are tl2br (top-left to bottom-right), bl2tr (bottom-left to top-right), tr2bl (top-right to bottom-left) and br2tl (bottom-right to top-left) (default tl2br). |
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1.5). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeOut). |
random:Boolean |
If set to true, allows the transition to be applied on a random direction (default false). |
tileHeight:Number |
The height of the tiles (in pixels) that compose the effect (default 100). |
tileWidth:Number |
The height of the tiles (in pixels) that compose the effect (default 100). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
SquareLight
Works only with images.
direction:String |
The direction of the transition effect. Possible values are tl2br (top-left to bottom-right), bl2tr (bottom-left to top-right), tr2bl (top-right to bottom-left) and br2tl (bottom-right to top-left) (default tl2br). |
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeOut). |
random:Boolean |
If set to true, allows the transition to be applied on a random direction (default false). |
tileHeight:Number |
The height of the tiles (in pixels) that compose the effect (default 100). |
tileWidth:Number |
The height of the tiles (in pixels) that compose the effect (default 100). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
Stripes
Works only with images.
barWidth:Number |
The width of the transparent bars (in pixels) used by the transition effect. The width is measured in pixels and any decimal values will be rounded up to integer values (default 50). |
direction:String |
The direction of the transition effect. Possible values are l2r (left to right), r2l (right to left), t2b (top to bottom) and b2t (bottom to top) (default l2r). |
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1.5). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeInOut). |
random:Boolean |
If set to true, allows the transition to be applied on a random direction (default false). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
Waves
Works only with images.
barWidth:Number |
The width of the transparent bars (in pixels) used by the transition effect. The width is measured in pixels and any decimal values will be rounded up to integer values (default 60). |
direction:String |
The direction of the transition effect. Possible values are l2r (left to right), r2l (right to left), t2b (top to bottom) and b2t (bottom to top) (default l2r). |
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeIn). |
random:Boolean |
If set to true, allows the transition to be applied on a random direction (default false). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
WaveScale
Works only with images.
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeOut). |
maxWidth:Number |
The maximum width (in pixels) that the bars from the effect can scale up to (default 100). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top
Wavy
Works only with images.
barWidth:Number |
The width of the transparent bars (in pixels) used by the transition effect. The width is measured in pixels and any decimal values will be rounded up to integer values (default 60). |
direction:String |
The direction of the transition effect. Possible values are l2r (left to right), r2l (right to left), t2b (top to bottom) and b2t (bottom to top) (default l2r). |
duration:Number |
The duration (in seconds) of the transition. The parameter also accepts decimal values (default 1). |
easing:String |
The type of easing used by the motion tween for the transition effect. Possible values are easeIn, easeOut and easeInOut (default easeOut). |
random:Boolean |
If set to true, allows the transition to be applied on a random direction (default false). |
tweenType:String |
The type of tween motion applied to the transition effect. Possible values are Back, Bounce, Circ, Cubic, Elastic, Expo, Quad, Quart and Sine (default Expo). |
Top