Carousel

A carousel is used to display a rotating set of images, text, or other content within a slider. It presents multiple pieces of content in a compact, interactive format.

You can carousel any content, this control works really well for HERO/HERO 2.0 objects.

A carousel will rotate to the next item every 3 seconds, when it gets to the last item it will start again. User can use the left/right icons to force a change and the dots at the bottom of the carousel. On mobile and tablets, users can swipe these left and right.

Generally the rule is that items in the carousel should be of the same size (height/width) to ensure a consistent user experience.

Note: there are also some controls that carousel items for you. For example, if you had a document library with just images in it, you could use a Document Library List web component and use the Carousel option.

Key Features

• Image Slideshow: Automatically or manually cycles through multiple items.
• Controls and Indicators: Includes navigation controls (arrows) and indicators (dots) for user interaction.
• Responsive Design: Adjusts seamlessly to different screen sizes.
• Customisable: Supports captions, custom animations, and different content types (images, text, videos).

Examples

• Homepages: Showcase featured products, promotions, or services in a dynamic way.
• Portfolios: Display multiple project images or testimonials.
• Galleries: Create interactive photo slideshows for events or products.

This example is 6 columns (half screen width), you can use this for any size.