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