Carousels

What is a carousel

A carousel (or a slider) typically has content (images, headings, links, etc.) in a horizontal scroll. Usually, some arrow buttons will allow users to rotate the carousel content. Some carousels rotate by autoplay, which is highly distracting.

Carousels can vary in features, implementations and use cases, making them difficult to define precisely. What we can do, however, is list the most common traits carousels have, for example:

• May have one or more items visible at a time.
• May have slides that contain straightforward content (like a single image each) or complex content (like form fields and tooltips and all sorts of other complicated things).
• May have controls on the left and right of the main slide to navigate to the previous and next slide, respectively.
• May have controls at the bottom or top of the main slide to jump to specific items.
• May automatically advance through slides on its own, at whatever pace the owners feel like using.
• May be oriented horizontally, or vertically.
• May wrap items around when a user tries to move past the beginning or end of the set (sometimes called “infinite scrolling”).
• May visually emphasize a single item to show it is “active”.

Is there a native HTML <carousel> element we can use? No.

The rest of this premium article is available to ARK license holders.