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.

    Modifing 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.

    Min/Max Height

      Viewport Height

        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.