Layout & Component Blocks

Carousel

Overview

The Image Carousel component allows you to showcase multiple images in a rotating or sliding format, making it ideal for highlighting visual content without overwhelming the page. It provides an interactive way for users to browse through a set of images within a single section.

View Carousel Component Demo

When to Use

  • To highlight multiple related visuals (e.g., product images, event photos).
  • When you want to save space while still showcasing several images.
  • To create an interactive experience that encourages user engagement.
How To

How To

Create a Carousel Component

  1. Navigate to the page you’d like to update, and enter the Edit Mode for the page.
  2. Choose the Section you would like to add the block, click the plus (+) icon.
  3. Select Carousel component from the component list.

Add Images to Carousel

  1. In the image section, click the Add Media button to add an image from the media library or to upload an image.
    1. Minimum image dimensions: 1200px x 600px.
    2. Maximum image dimensions: 2400px x 1200px.
  2. Click Insert Selected button.
Screenshot of the Carousel component showing where the add media button, caption field, and save button are located.

Add Caption

  1. Enter the caption that you would like to display with the image. (This is optional but recommended.)

Add Additional Slides

  1. Click the Add Carousel Slide button at the bottom to add any subsequent slides to this component and repeat each of the above steps.  
  2. Once all slides are completed, click Save button to save the component. 
Example of carousel component with 'add additional slides' button and 'save' button in view

User Experience Best Practices

  • Limit the number of slides: Using a carousel with only 3–6 slides helps avoid overwhelming users and reduces the time it takes for the page to load on devices.
  • Aim to have only one carousel per page: Multiple carousels can compete for attention and reduce clarity. Keeping it to one helps maintain focus and improves user experience.
  • Prioritize key messages: If adding captions to the images, place the most important content in the first slide, as users may not scroll through all the slides.
  • Maintain consistent dimensions: The component will automatically resize images so ensure your images are maintaining the ratios as described in the Upload Image section above.