Carousel

Basic example

This example shows a responsive carousel with six items, rendered as cards with an image and subtitle. Mobile sees one card at a time, which then increases to two and three as the viewport width increases.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

No dots

When dots are turned off, the arrows are spaced out more but still appear below the carousel.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Customization

This example shows the ability to customize the gap between slides, the gap between the slides and the controls, 'peek' styling for cards on desktop and mobile, and the size and color of the arrow button icons.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Circular behavior

This setting allows the user to continue paging in one direction forever and the items from the beginning of the list will be repeated once the end of the list is reached. It's recommended to show the dots when the circular setting is enabled so the user knows when the end of the list is reached.

Unless paging is done in a rapid-fire succession (the carousel needs a split second to add more hidden items after a page transition completes), the next set of items will always appear to come from the same direction as all previous items, even when circling back to the beginning of the list.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Autoplay with circular behavior

This example shows autoplay behavior with circular mode enabled, to show a slideshow of images.

Pressing the Esc key will stop the autoplay and reset the carousel to the first item. This is an important accessibility feature for screen readers, because the contents of each new slide brought into view by autoplay are automatically read aloud, no matter where the user is on the page, which can be distracting while trying to read through another part of the page.