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.

TipIn order to have an infinite scrolling slider, use five images of more.

To loop through a set of slides instead of single items, just check the sets option.

The flexibility of the Slider component allows you to use both arrows and dots navigation, just by checking on the related options.

Create a custom outside navigation using the Position, Utility (or Base) and Slidenav stacks.

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.

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.

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

Together with the Overlay component, content transitions are used to build a classic caption for the slider.

To toggle content transitions simply use the toggle option.