Pages 2.0 | Add an Image Carousel Widget to a Page

🎯 Who this article is for: This article is for page group owners, editors, and admins who want to add the Image Carousel Widget to a page.

💼 Package requirements: The Image Carousel Widget is available to all packages.

🔒 Permissions: Adding or configuring the Image Carousel Widget requires admin, page group owner, or page group editor access.

1. Overview

The Image Carousel Widget lets you display a rotating sequence of images directly on a page in Happeo. The carousel advances through them automatically with a fade transition, on a schedule you set. Viewers can also move between images manually using arrow buttons or dot navigation. It is a simple way to surface visual content, from team photos to product screenshots, without pointing people to a separate album or an external link.

Each image in the carousel supports setting a focus point, which controls which part of an image stays visible when it is cropped or scaled on different screen sizes. This prevents key subjects, like faces in team photos or logos in branded images, from being cut off.

2. Use cases

• Share a full photo collection without cluttering the page: After an all-hands, offsite, or company event, there are often dozens of photos worth sharing. A carousel brings them all into a single widget on the relevant page, so nothing gets buried and the layout stays clean.
• Bring a page to life with images that rotate on their own: Auto-advancing images makes a page feel more dynamic. The carousel cycles on its own, drawing the eye and giving visitors something to engage with from the moment they land. It works especially well on company homepages and high-traffic landing pages where that sense of motion makes a strong first impression.
• Let visitors browse a set of related visuals at their own pace: For pages covering a specific office, product, or team, a carousel lets visitors move through multiple images, screenshots, or location photos on their own terms. 

3. How to add the Image Carousel Widget

1. Navigate to the page where you want to add the widget.
2. Click the pencil icon (top-right) to enter the editor.
3. Go to Widgets and select Image Carousel Widget to add it to a section on the page.
   • 🔎 For guidance on adding widgets to your page, see Add and Manage Widgets.
4. Click + Add images to add your first images and select from your preferred source.
5. Once your images are added, hover over any thumbnail at the bottom of the widget to access the individual image options: Set focus point (crosshair icon), edit the image (pencil icon), or remove it (trash icon).
6. When you are ready, publish the page to make the carousel visible to everyone with access to view the page.

How to reorder images

To change the order in which images appear, click on the widget to enter edit mode. In the thumbnail row at the bottom of the widget, click and drag any thumbnail left or right to reposition it. The carousel will display images in the order shown in the thumbnail row.

4. How to configure the Image Carousel Widget

To adjust the carousel's behavior, hover over the widget and click the settings (gear) icon to open the widget settings. Switch between the Configure and Style tabs.

Configure

• Show navigation arrows: Toggle on to display left and right arrows so viewers can move between images manually. On by default.
• Show dot navigation: Toggle on to show dots at the bottom of the carousel indicating which slide is currently visible. On by default.
• Auto-advance slides: Toggle on to have the carousel advance automatically to the next image. On by default.
• Time per slide: Set how long each image stays visible before the next one appears. Options are 3, 5, 10, 15, and 20 seconds. Defaults to 5 seconds.
• Widget header: Toggle on to add a title above the carousel.

Style

If the brand style applied to the page group is not locked, you can access the Style tab to customize the widget's appearance.

• Style option: Choose a preset style or select (Customize) to configure each setting individually.
• Background color: Choose a background color from your brand palette.
• Background image: Add an image behind the widget using Select source. You can choose between recommended images, images from Unsplash, or uploading an image from your computer.
• Color theme: Set the overall color scheme (e.g. Automatic (Light, with dark text)).
• Padding: Adjust the spacing around the widget using the slider (0–32px).
• Custom padding: Toggle on to set padding values for each side individually.
• Border: Toggle on to add a border around the widget. Use the width slider and configure:
  • Border direction: Choose which sides display the border: None, All sides, Top, Right, Bottom, or Left.
  • Border color: Select a color from your brand palette.
• Shadow: Toggle on to add a shadow effect behind the widget.
• Round corners: Adjust the corner radius using the slider for softer, card-style edges.

5. Best practices

The Image Carousel Widget works best when the images are curated thoughtfully and the settings match how your audience will engage with them.

• Set a focus point on every image that contains a face or key subject: If your images include people, logos, or a specific element that should not get cropped, set a focus point on each one. This keeps the most important part of the image visible regardless of screen size. 
• Match the slide timing to your content: Five seconds works well for simple visuals. If any images contain text or important detail, consider setting a longer interval, such as 10 or 15 seconds, to give viewers enough time to read or absorb what they see.
• Keep the collection cohesive: A carousel is most effective when all images belong together, tied to one event, one team, one location, or one theme. A mixed set of unrelated images is harder to engage with and less likely to leave a lasting impression.

6. Frequently asked questions

Do viewers need to interact to advance the slides?

No, depending on your configuration settings. With Auto-advance slides enabled (the default), the carousel advances on its own at the interval you set. Viewers can also move between images manually using the navigation arrows or dot navigation, if those are turned on.

What happens if I turn off Auto-advance slides?

The carousel stays on the first image until a viewer manually navigates using the arrows or dots. If you turn off auto-advance, make sure at least one manual navigation option is enabled, otherwise viewers will not be able to move between images.

Can I add a title to the carousel?

Yes. Toggle on Widget header in the Configure settings to add a title above the carousel.