Slider

Create a responsive carousel slider.

The Slider component is fully responsive and supports touch and swipe navigation as well as mouse drag for desktops. It even accelerates to keep up with your pace when you click through previous and next navigation. All animations are hardware accelerated for a smoother performance.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
Note In order to have an infinite scrolling slider, use five images of more.

Gutter

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Center

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Sets

To loop through a set of slides instead of single items, just check the sets option.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Dots

The flexibility of the Slider component allows you to use both arrows and dots navigation, just by checking on the related options.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

    Custom and outside navigation

    Create a custom outside navigation using the Position, Base and Slidenav stacks.
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    Viewport height

    Use the viewport option to stretch the height of the elements and fill the whole viewport height. The Cover component is used so that images cover the whole item area and are clipped. The grid-match option from the Grid component matches the height of the direct child of each item. This is useful in this example, since the child element now applies the same width and height as the list item. We may also set an offset in percentage. The example below is set to 70% os the viewport height.
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    Content

    The slider is not restricted to images. Any content can be used like text, videos and images. Here is an example using the Card component.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Content parallax

    Use the parallax option in the elements inside the slides to animate them together with the slider animation.
    • Heading

    • Heading

    • Heading

    • Heading


    Content transitions

    Together with the Overlay component, content transitions are used to build a classic caption for the slider.
    • Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
    • Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
    • Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
    • Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

    Toggle on hover

    To toggle transitions on hover, use the toggle option. This will trigger the transition when the element is hovered.
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10