Understand the Carousel block
The Carousel block displays multiple images within a single content area as a rotating image slider, allowing recipients to navigate through a sequence of slides. Each slide is configured independently with its own image and alternate text.
The Carousel block is supported in both email and landing page templates. For email templates, carousel functionality requires AMP (Accelerated Mobile Pages) to be enabled on the template. Without AMP, the carousel will not function as an interactive slider in email clients.
â ď¸ Warning: AMP is not widely supported across all email clients. Interactive carousel functionality will only work for recipients using a supported client. The following email clients support AMP: Gmail (desktop, iOS, and Android), Yahoo Mail (desktop, iOS, and Android), AOL Mail (desktop, iOS, and Android), Mail.ru, and FairEmail. Recipients using any other email client will see a static fallback rather than an interactive carousel.
đ Note: The Carousel block is configurable and may not be visible in your Designer if it has not been enabled for your CRM instance. Contact your SHR support team if you need this block enabled.
Before you start
Outlined below are important factors to know before working with the Carousel block.
The Carousel block must be placed inside a column within a Columns row. It cannot be added directly to the canvas.
For interactive carousel functionality in emails, AMP must be enabled on the template. Contact your SHR support team for guidance on enabling AMP.
Each slide requires its own image. Slides without an image URL will display a placeholder.
Alternate text should be added to every slide for accessibility.
Test your template across email clients before publishing, carousel support varies between clients.
Add a Carousel block
You can add a Carousel block to either an email template or a landing page template.
In an email template
Follow the steps below to add a Carousel block to an email template.
In the left navigation menu, click Campaign Management Tools.
Click Channels, then click Emails.
Open the template you want to edit and click Designer.
Click the Content tab in the right-side panel.
Drag the Carousel block from the panel into a column in the canvas.
Click the block to select it. The right-side panel updates to show the Carousel settings with a default set of three slides.
In a landing page template
Follow the steps below to add a Carousel block to a landing page template.
In the left navigation menu, click Campaign Management Tools.
Click Components, then click Landing Pages.
Open the template you want to edit and click Designer.
Click the Content tab in the right-side panel.
Drag the Carousel block from the panel into a column in the canvas.
Click the block to select it. The right-side panel updates to show the Carousel settings with a default set of three slides.
Manage slides
The Carousel block displays slides as tabs in the right-side panel under Images: Image 1, Image 2, Image 3, and so on. Each tab represents one slide in the carousel.
Add a slide
Follow the steps below to add a new slide to the carousel.
Click the Carousel block in the canvas to select it.
In the right-side panel under Images, click the + button to the right of the existing slide tabs.
Configure the image and settings for the new slide.
Remove a slide
Follow the steps below to remove a slide from the carousel.
Click the Carousel block in the canvas to select it.
In the right-side panel under Images, click the slide tab you want to remove.
Click the delete icon next to the tab.
The slide is removed and the remaining slides renumber automatically.
Configure a slide image
Each slide is configured independently. Follow the steps below to configure the image for a slide.
Click the Carousel block in the canvas to select it.
In the right-side panel under Images, click the tab for the slide you want to configure, for example, Image 1.
In the image area, click Upload Image to upload a new image file, or click More Images to browse the Image Library or stock images.
Once an image is selected, the Image URL field is populated automatically. The image dimensions are displayed alongside the URL.
Enter a description in the Alternate Text field. This text is shown to recipients whose email client cannot display images, and is read by screen readers. Replace the default placeholder text with a meaningful description.
To configure additional options for the slide, such as a link, click Show More Options.
đ Note: For guidance on uploading images to the Image Library, refer to the Template Designer â Image article.
Configure carousel behaviour
The Carousel section in the right-side panel controls how the carousel displays and behaves for recipients.
Follow the steps below to configure the carousel behaviour.
Click the Carousel block in the canvas to select it.
In the right-side panel, scroll to the Carousel section.
Configure the following settings as needed.
Setting | Description |
Show Previews | Displays a row of thumbnail previews below the main slide image. Turn off to hide the thumbnail strip. On by default. |
Preview Width | The width of each thumbnail preview in pixels. The default is 100px. |
Autoplay | Turn on to have the carousel automatically advance through slides without recipient interaction. Off by default. |
Loop | Turn on to make the carousel loop continuously from the last slide back to the first. Off by default. |
Configure spacing and responsive settings
The General and Responsive Design sections in the right-side panel control the spacing and visibility of the Carousel block.
Follow the steps below to configure these settings.
Click the Carousel block in the canvas to select it.
In the right-side panel, scroll to the General section.
Configure Container Padding to set the space around the outside of the carousel container. The default is 10px on all sides. Click More Options to set top, right, bottom, and left values independently.
Responsive design
Scroll to the Responsive Design section to configure visibility settings.
Turn on Hide on Desktop to hide the Carousel block when the email is viewed on a desktop device. The block remains visible in the Designer canvas but is greyed out to indicate it is hidden on that view.
Enable Display Conditions on a Carousel block
Display Conditions allow the entire carousel to be shown or hidden for specific recipients based on their profile data.
Follow the steps below to enable Display Conditions on a Carousel block.
Click the Carousel block in the canvas to select it.
In the inline block toolbar that appears above the block, click the checkmark icon. The Display Condition section becomes active at the top of the right-side panel.
Configure the condition to control which recipients see this carousel.
đ Note: Display Conditions are also referred to as Dynamic Content. Refer to the Template Designer â Display Conditions article for full guidance.
Duplicate or delete a Carousel block
The inline block toolbar above the carousel provides options to duplicate or delete the block.
Click the copy icon to duplicate the block, creating an identical copy immediately below it.
Click the trash icon to delete the block and all its slides from the template.
Key considerations
Outlined below is additional information about working with the Carousel block.
Carousel not working in email
Interactive carousel functionality in email requires AMP to be enabled on the template. AMP is also only supported by certain email clients: Gmail, Yahoo Mail, and AOL Mail (all on desktop, iOS, and Android), Mail.ru, and FairEmail. Recipients using any other email client will see a static fallback image rather than an interactive slider. Contact your SHR support team for guidance on enabling AMP.
Number of slides
The Carousel block starts with three slides by default. Slides can be added using the + button or removed using the delete icon on each tab. There is no set maximum, but a very large number of slides may affect email load time.
Alternate text for slides
Each slide should have its own alternate text describing the image. The default placeholder text should always be replaced with a meaningful description for accessibility and best practice.
Linking individual slides
Click Show More Options on each slide tab to configure a link for that individual slide.
Loop setting
When Loop is turned on, the carousel returns to the first slide after the last slide has been reached, creating a continuous loop. When turned off, the carousel stops at the last slide.