Slideshow

Create a responsive slideshow with images and videos.


Animations

Slide
Fade
Scale
Pull
Push

Viewport height

Check the viewport-height option to stretch the slideshow height to fill the whole viewport. You can set the min-height option to define a minimum height. The following example is set to 70% of the viewport height.

Ken Burns

Add Ken Burns effect with options for default, reverse, origin + center left and origin + center right.

Navigation dots


    Videos

    The slideshow is not restricted to images. Other stacks like the Video can be positioned in the background of each slide. Videos are muted, and play automatically. The video will pause whenever it's not visible, and resume once it becomes visible again.

    Content parallax

    • Heading

      Lorem ipsum dolor sit amet,
      sapien platea morbi dolor lacus nunc.
    • Heading

      Lorem ipsum dolor sit amet,
      sapien platea morbi dolor lacus nunc.

    Content overlay

    Together the Position and Transition stacks are used to build a classic caption for the slideshow.
    • Bottom

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Top

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Right

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Left

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.