Skip to content
Anchor Theme
Component Guide

Banner - Carousel

Back to Components Overview

The Carousel Banners component allows you to create visually appealing hero banners with multiple full-sized image slides. Each slide can feature an optional title, description, and a link button, giving you flexibility in presenting key information.

This component offers a range of configuration options, grouped into the following categories:

Settings This section contains general settings applicable to all components, including:

  • Hide on Mobile/Tablet/Desktop: Pick whether to hide, or show this component independently on mobile, tablet, and desktop resolutions via a set of three checkboxes.
  • Desktop/Mobile Padding: Adjust the top and bottom padding for both desktop and mobile views.
  • Section Background Colour: Choose a background colour from a pre-configured list of brand colours.
  • Section Alignment: Set the alignment of any content within the banner.
Animation Choose how the carousel banner enters the page. There are seven animation options available:

  • None
  • Slide in from the top
  • Slide in from the bottom
  • Slide in from the left
  • Slide in from the right
  • Fade in
  • Grow in
Slider Configuration This section allows you to fine-tune the behaviour and appearance of the carousel:

  • Slide Duration: Set how long each slide remains visible before moving to the next. The default is 6 seconds, but interacting with or hovering over the slide will pause the timer.
  • Transition Type: Choose whether slides should “slide” out of view or fade out after the timer expires.
  • Overlay Colour: Select a gradient overlay applied at the bottom of each slide to provide contrast between images and slider indicators. This can be disabled by setting the value to ‘none’ if desired, and the colour options come from a pre-configured list of brand colours.
  • Icon Colour: Set the outline and background colours for the slide indicators, with options drawn from brand colours.
Content This section lets you add, remove, or reorder individual slides within the carousel.

To Add a Slide

Click the ‘Add Item’ button at the bottom-right of the component.

A new row will appear at the bottom of the content table, where you can input information for the slide, such as the title, content, and button details.

To Remove a Slide

Hover over the slide row you wish to remove and click the (-) button that appears on the far-right. A confirmation prompt will ensure that you want to delete the slide.

To Reorder a Slide

Hover over the left-hand side of the slide row you want to move. When the cursor changes to a crosshair, you can drag and drop the slide into the desired position.

 

You can view examples of Carousel Banners with different styles and animations here.