Live Slider

3D Demo Slider

You can try out many of the available transitions in real-time! Just select a transition from the list and see how the slider animates.

LayerSlider

3D

demo Slider

The improve

is

to change.

to be perfect

is

to change often

- Winston Churchill

200+ 2D & 3D transitions with Transition Builder!

Use with any HTML content including embedded videos!

Responsive with Smart Resize & Touch-enabled!

 


200+ slide transitions

  • Try all transitions!
    • List of the 2D slide transitions (total available: 113)
    • Sliding from right
    • Sliding from left
    • Sliding from bottom
    • Sliding from top
    • Crossfading
    • Fading tiles forward
    • Fading tiles reverse
    • Fading tiles col-forward
    • Fading tiles col-reverse
    • Fading tiles (random)
    • Smooth fading from right
    • Smooth fading from left
    • Smooth fading from bottom
    • Smooth fading from top
    • Smooth sliding from right
    • Smooth sliding from left
    • Smooth sliging from bottom
    • Smooth sliding from top
    • Sliding tiles to right (random)
    • Sliding tiles to left (random)
    • Sliding tiles to bottom (random)
    • Sliding tiles to top (random)
    • Sliding random tiles to random directions
    • Sliding rows to right (forward)
    • Sliding rows to right (reverse)
    • Sliding rows to right (random)
    • Sliding rows to left (forward)
    • Sliding rows to left (reverse)
    • Sliding rows to left (random)
    • Sliding rows from top to bottom (forward)
    • Sliding rows from top to bottom (random)
    • Sliding rows from bottom to top (reverse)
    • Sliding rows from bottom to top (random)
    • Sliding columns to bottom (forward)
    • Sliding columns to bottom (reverse)
    • Sliding columns to bottom (random)
    • Sliding columns to top (forward)
    • Sliding columns to top (reverse)
    • Sliding columns to top (random)
    • Sliding columns from left to right (forward)
    • Sliding columns from left to right (random)
    • Sliding columns from right to left (reverse)
    • Sliding columns from right to left (random)
    • Fading and sliding tiles to right (random)
    • Fading and sliding tiles to left (random)
    • Fading and sliding tiles to bottom (random)
    • Fading and sliding tiles to top (random)
    • Fading and sliding random tiles to random directions
    • Fading and sliding tiles from top-left (forward)
    • Fading and sliding tiles from bottom-right (reverse)
    • Fading and sliding tiles from top-right (random)
    • Fading and sliding tiles from bottom-left (random)
    • Fading and sliding rows to right (forward)
    • Fading and sliding rows to right (reverse)
    • Fading and sliding rows to right (random)
    • Fading and sliding rows to left (forward)
    • Fading and sliding rows to left (reverse)
    • Fading and sliding rows to left (random)
    • Fading and sliding rows from top to bottom (forward)
    • Fading and sliding rows from top to bottom (random)
    • Fading and sliding rows from bottom to top (reverse)
    • Fading and sliding rows from bottom to top (random)
    • Fading and sliding columns to bottom (forward)
    • Fading and sliding columns to bottom (reverse)
    • Fading and sliding columns to bottom (random)
    • Fading and sliding columns to top (forward)
    • Fading and sliding columns to top (reverse)
    • Fading and sliding columns to top (random)
    • Fading and sliding columns from left to right (forward)
    • Fading and sliding columns from left to right (random)
    • Fading and sliding columns from right to left (reverse)
    • Fading and sliding columns from right to left (random)
    • Carousel
    • Carousel rows
    • Carousel cols
    • Carousel tiles horizontal
    • Carousel tiles vertical
    • Carousel-mirror tiles horizontal
    • Carousel-mirror tiles vertical
    • Carousel mirror rows
    • Carousel mirror cols
    • Turning tile from left
    • Turning tile from right
    • Turning tile from top
    • Turning tile from bottom
    • Turning tiles from left
    • Turning tiles from right
    • Turning tiles from top
    • Turning tiles from bottom
    • Turning rows from top
    • Turning rows from bottom
    • Turning cols from left
    • Turning cols from right
    • Flying rows from left
    • Flying rows from right
    • Flying cols from top
    • Flying cols from bottom
    • Flying and rotating tile from left
    • Flying and rotating tile from right
    • Flying and rotating tiles from left
    • Flying and rotating tiles from right
    • Flying and rotating tiles from random
    • Scaling tile in
    • Scaling tile from out
    • Scaling tiles random
    • Scaling tiles from out random
    • Scaling in and rotating tiles random
    • Scaling and rotating tiles from out random
    • Mirror-sliding tiles diagonal
    • Mirror-sliding rows horizontal
    • Mirror-sliding rows vertical
    • Mirror-sliding cols horizontal
    • Mirror-sliding cols vertical
    • List of the 3D slide transitions (total available: 100)
    • Spinning tile to right (180°)
    • Spinning tile to left (180°)
    • Spinning tile to bottom (180°)
    • Spinning tile to top (180°)
    • Spinning tiles to right (180°)
    • Spinning tiles to left (180°)
    • Spinning tiles to bottom (180°)
    • Spinning tiles to top (180°)
    • Horizontal spinning tiles random (180°)
    • Vertical spinning tiles random (180°)
    • Scaling and spinning tiles to right (180°)
    • Scaling and spinning tiles to left (180°)
    • Scaling and spinning tiles to bottom (180°)
    • Scaling and spinning tiles to top (180°)
    • Scaling and horizontal spinning tiles random (180°)
    • Scaling and vertical spinning tiles random (180°)
    • Spinning rows to right (180°)
    • Spinning rows to left (180°)
    • Spinning rows to bottom (180°)
    • Spinning rows to top (180°)
    • Horizontal spinning rows random (180°)
    • Vertical spinning rows random (180°)
    • Vertical spinning rows random (540°)
    • Scaling and spinning rows to right (180°)
    • Scaling and spinning rows to left (180°)
    • Scaling and spinning rows to bottom (180°)
    • Scaling and spinning rows to top (180°)
    • Scaling and horizontal spinning rows random (180°)
    • Scaling and vertical spinning rows random (180°)
    • Spinning columns to right (180°)
    • Spinning columns to left (180°)
    • Spinning columns to bottom (180°)
    • Spinning columns to top (180°)
    • Horizontal spinning columns random (180°)
    • Vertical spinning columns random (180°)
    • Horizontal spinning columns random (540°)
    • Scaling and spinning columns to right (180°)
    • Scaling and spinning columns to left (180°)
    • Scaling and spinning columns to bottom (180°)
    • Scaling and spinning columns to top (180°)
    • Scaling and horizontal spinning columns random (180°)
    • Scaling and vertical spinning columns random (180°)
    • Drunk colums scaling and spinning to right (180°)
    • Drunk colums scaling and spinning to left (180°)
    • Turning cuboid to right (90°)
    • Turning cuboid to left (90°)
    • Turning cuboid to bottom (90°)
    • Turning cuboid to top (90°)
    • Scaling and turning cuboid to right (90°)
    • Scaling and turning cuboid to left (90°)
    • Scaling and turning cuboids to right (90°)
    • Scaling and turning cuboids to left (90°)
    • Scaling and turning cuboids to bottom (90°)
    • Scaling and turning cuboids to top (90°)
    • Scaling and horizontal turning cuboids random (90°)
    • Scaling and vertical turning cuboids random (90°)
    • Turning rows to right (90°)
    • Turning rows to left (90°)
    • Horizontal turning rows random (90°)
    • Scaling and turning rows to right (90°)
    • Scaling and turning rows to left (90°)
    • Scaling and turning rows to bottom (90°)
    • Scaling and turning rows to top (90°)
    • Scaling and horizontal turning rows random (90°)
    • Scaling and vertical turning rows random (90°)
    • Scaling and horizontal turning drunk rows to right (90°)
    • Scaling and horizontal turning drunk rows to left (90°)
    • Turning columns to bottom (90°)
    • Turning columns to top (90°)
    • Vertical turning columns random (90°)
    • Scaling and turning columns to bottom (90°)
    • Scaling and turning columns to top (90°)
    • Scaling and turning columns to right (90°)
    • Scaling and turning columns to left (90°)
    • Scaling and horizontal turning columns random (90°)
    • Scaling and vertical turning columns random (90°)
    • Scaling and vertical turning drunk columns to right (90°)
    • Scaling and vertical turning drunk columns to left (90°)
    • Spinning cuboid to right (180°, large depth)
    • Spinning cuboid to left (180°, large depth)
    • Spinning cuboid to bottom (180°, large depth)
    • Spinning cuboid to top (180°, large depth)
    • Scaling and spinning cuboids to right (180°, large depth)
    • Scaling and spinning cuboids to left (180°, large depth)
    • Scaling and spinning cuboids to bottom (180°, large depth)
    • Scaling and spinning cuboids to top (180°, large depth)
    • Scaling and horizontal spinning cuboids random (180°, large depth)
    • Scaling and vertical spinning cuboids random (180°, large depth)
    • Scaling and spinning rows to right (180°, large depth)
    • Scaling and spinning rows to left (180°, large depth)
    • Scaling and spinning rows to bottom (180°, large depth)
    • Scaling and spinning rows to top (180°, large depth)
    • Scaling and horizontal spinning rows random (180°, large depth)
    • Scaling and vertical spinning rows random (180°, large depth)
    • Scaling and spinning columns to bottom (180°, large depth)
    • Scaling and spinning columns to top (180°, large depth)
    • Scaling and spinning columns to right (180°, large depth)
    • Scaling and spinning columns to left (180°, large depth)
    • Scaling and horizontal spinning columns random (180°, large depth)
    • Scaling and vertical spinning columns random (180°, large depth)

    you can scroll
    in this box

You can try out many of the available transitions in real-time! Just select a transition from the list and see how the slider animates.

13 skins

  • Select the skin!
    • Skin selector
    • V5 Skin
    • Borderless Light Skin
    • Borderless Dark Skin
    • Borderless Light 3D Skin
    • Borderless Dark 3D Skin
    • Light Skin
    • Dark Skin
    • Glass Skin
    • Carousel Skin
    • Default Skin
    • Minimal Skin
    • Full Width Skin
    • Full Width Dark Skin

You can easily customize these skins or if you need, your can create your own skin as well! (Skins PSD file is included in the package.)

3 navigation types

You can select from three navigation types! These can be used with any skins and you can set the size of the thumbnails as well.


Text/HTML