Slideshow

Animations

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit amet.

Image

Lorem ipsum dolor sit amet.

Video

Lorem ipsum dolor sit amet.

YouTube

Lorem ipsum dolor sit amet.

Vimeo

Lorem ipsum dolor sit amet.

    Modifying animation with parallax

    Heading

    Lorem ipsum dolor sit amet.

    Heading

    Lorem ipsum dolor sit amet.

    Heading

    Lorem ipsum dolor sit amet.

    Heading

    Lorem ipsum dolor sit amet.

    Toggle Transitions + Kenburns

    Bottom

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Bottom

    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.

    Parallax Control

    Heading

    Lorem ipsum dolor sit amet.

    Heading

    Lorem ipsum dolor sit amet.

    Heading

    Lorem ipsum dolor sit amet.

    Heading

    Lorem ipsum dolor sit amet.

    Min/Max Height

    Heading

    Lorem ipsum dolor sit amet.

    Heading

    Lorem ipsum dolor sit amet.

    Heading

    Lorem ipsum dolor sit amet.

    Heading

    Lorem ipsum dolor sit amet.

      Viewport Height

      Heading

      Lorem ipsum dolor sit amet.

      Heading

      Lorem ipsum dolor sit amet.

      Heading

      Lorem ipsum dolor sit amet.

      Heading

      Lorem ipsum dolor sit amet.

        JavaScript Options

        Option Value Default Description
        animation String slide The animation to use. (slide, fade, scale, pull, push)
        autoplay Boolean false Starts autoplaying the slideshow.
        autoplay-interval Number 7000 The delay between switching slides in autoplay mode.
        draggable Boolean true Enable pointer dragging.
        finite Boolean false Disable infinite sliding.
        index Number 0 Slideshow item to show. 0 based index.
        pause-on-hover Boolean true Pause autoplay mode on hover.
        velocity Number 1 The animation velocity (pixel/ms).
        ratio Boolean, String 16:9 The ratio. (`false` prevents height adjustment)
        min-height Boolean, Number false The minimum height.
        max-height Boolean, Number false The maximum height.
        i18n Object null Override default translation texts.

        i18n

        Key Default Description
        next Next Slide aria-label for next slide button.
        previous Previous Slide aria-label for previous slide button.
        slideX Slide %s aria-label for pagination slide button.
        slideLabel %s of %s aria-label for slide.