Adding a Carousel

In this article, you learn how to place a carousel on a webpage. A carousel is an image display tool that rotates a collection of pictures on the screen. Carousels placed on the Homepage just below the header are popular on websites in Asia.

Preparing Images

The Carousel Component displays up to nine images. We recommended a maximum of four pictures. Studies suggest click-through rates decline as the number of carousel images goes beyond four. To maximise loading speed, upload lightweight images. For best results, we recommend these image specifications:

maximum width of 600 px
file size less than 100 kb

1 Placing the Carousel Component

Click PUBLISH on the top menu bar. A popup window displays. Click Website Content > Manage.

The Website Content page displays.

Hover your mouse pointer on the Homepage.
Click the Edit button. The Edit Content area opens.

Drag a Carousel Component from the left panel to the page. Place the component immediately below the header.

Hover the mouse pointer on the Carousel Component to display the green toolbar. Click the toolbar Settings button to open the Carousel Settings panel.

2 Adding an image

After clicking the toolbar Settings button, the Settings panel opens. Click the Edit Images tab.

Inside the Edit Images panel, hover the mouse pointer on a grey image container.
Click the pencil button. The Image Settings panel opens.
To upload an image from your computer, click the Cloud button. To insert an image from your File Manager, click the finger pointer button.
Click the Back button after uploading or inserting an image.

2.1 Best Practice

Occasionally, the tops of images are chopped off when viewing pictures. If that problem occurs with your images, review this suggested best practice: Image Alignment on Sliders and Carousels Best Practices.

3 Adding more images

To insert a second image, hover the mouse pointer on the other grey image container. Click the pencil button to open the Edit Images panel. Upload or insert an image as described above.

To add more images, click the Plus button to create new grey image containers. Repeat the upload or insert process.

4 Adding captions and links

You can add a caption and link to each carousel image.

Inside the Carousel Settings panel, click the Edit Images tab.
Hover the mouse pointer on the image you want to edit, then click the pencil button. The Image Settings panel opens. There are four controls.

Caption

Type a word or phrase in the caption field. Click the built-in translator icon. The translated language based on locale appears in the text field. To insert a bilingual caption, place the cursor to the left of the translated text and type an English word or phrase.

Link - Type a URL into the link field. Include the http:// or https:// prefix. When the image is clicked, the link opens.
Open in New Tab - Check the box to open the link in a new tab. Uncheck the box to open the link in the same window.

5 Editing image size

The Carousel Settings panel lets you control image size and carousel behaviour. Four controls at the top of the panel manage image size, and three control placement.

Image Align - Adjust the vertical position of an image inside the carousel. Align to the top, centre, or align to the bottom.
Image Size - For information about FIT and FILL, see Sizing Images.
V and H focus - When FILL is selected, you can adjust the image display by shifting the image along an up-down vertical axis (V Focus) or a left-right horizontal axis (H Focus).
Width - The Width feature changes the distance between the left and right edges of the carousel display area. Maximum width is 100%. If the FIT image size option is selected, changing the width also changes the image size.
Default Height - Set the default height of the carousel. We recommend 600 px as a starting point.
Minimum Height - Set the minimum height of the carousel. We recommend setting this value less than or equal to the default height. If the minimum height is higher than the default height, carousel image display on mobile devices might not be optimal. For example, images appear normal, but the extra height of the carousel tool may push content off the mobile device screen. As a result, viewers need to scroll to see additional content.

6 Customising carousel behaviour controls

Customise the behaviour of the carousel by adjusting any of the six controls in the lower half of the Carousel Settings panel. These controls are described in the next six sections.

Slideshow
Caption
Arrows
Dots
Font Scaling
Advanced

7 Editing slideshow settings

Click the Slideshow settings tab on the Carousel Settings panel. The Slideshow panel opens with four settings.

Autoplay - Check the Autoplay box to rotate images automatically. Uncheck the box if you want viewers to manually slide images by clicking arrows.
Repeat - Check the Repeat box to rotate images continuously. Uncheck the box to display each image once and stop rotating at the last image.
Fade - Check the Fade box to set the image transition to fade. Uncheck the box to set the default slide transition effect.
Transition Delay - Adjust image transition speed. The fastest transition speed is 0 milliseconds. The slowest transition speed is 1000 milliseconds.

8 Editing caption settings

Customise the appearance of captions on carousel images. There are nine controls on the Caption Settings panel. The caption feature includes a text field on a horizontal background bar.

Note: Caption text is not entered inside this panel. To enter or change a carousel image caption, see Step 4 above Adding Captions and Links.

Visible - Check the Visible box to make the caption visible. Uncheck the box to remove the caption and its background bar.
Position on Top - Check the Position on Top box to place the caption and background bar at the top of the screen. Uncheck the box to place the caption and background bar at the bottom of the screen.
Alignment - Choose where the caption displays: place the caption on the left side of the screen, in the middle, or on the right side.
Text Color - Choose the colour of the caption. Click the box to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette.
Text Size - Click the plus (+) or minus (-) boxes to increase or decrease the size of the caption text.
Background Colour - Choose the colour of the background bar that displays behind the caption. Click the box to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette.
Height - Click the plus (+) or minus (-) boxes to increase or decrease the height of the background bar.
Padding L-R - Click the plus (+) or minus (-) boxes to increase or decrease the spacing between the left or right edge of the background bar and the caption.
Padding T-B - Click the plus (+) or minus (-) boxes to increase or decrease the spacing between the top of the background bar and the caption. This feature works in conjunction with the value set for the background bar height.

9 Editing arrow settings

The Carousel Component preset includes one arrow button on either side of the carousel display. Users click an arrow to advance the carousel forward or backward. You can customise the appearance of the arrows inside the Arrow Settings panel.

Visible - Check the Visible box to make the arrows visible. Uncheck the box to remove the arrows from the display.
Arrow Color - Two separate boxes set the colour of the left and right arrows. Click a box to open a Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette for each arrow.
Arrow Size - Two separate settings control the size of the left and right arrows. Click the plus (+) or minus (-) boxes to increase or decrease the diameter of each arrow.
Arrow Position - Two separate settings control the position of the left and right arrows. Click the plus (+) or minus (-) boxes to increase or decrease the position of the arrow relative to the left or right side of the carousel edge.

10 Editing dot settings

Dots display at the bottom of the carousel. The number of dots shows the number of images in the rotation. The bold dot shows the current image’s place in the rotation. You can customise the appearance of the dots inside the Dots Settings panel.

Visible - Check the Visible box to make the dots visible. Uncheck the box to remove the dots from the display.
Color - Click the Dots Color box to open a Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette for each arrow.
Size - Click the plus (+) or minus (-) boxes to increase or decrease the diameter of the dots.
Dots Space - Click the plus (+) or minus (-) boxes to increase or decrease the distance between dots.
Alignment - Choose the dots’ display location: place the dots on the left side of the screen, in the middle, or on the right side.
Padding L-R - Click the plus (+) or minus (-) boxes to increase or decrease the spacing between the dots and the left or right side of the carousel display.
Padding T-B - Click the plus (+) or minus (-) boxes to increase or decrease the spacing between the dots and the bottom of the carousel display.

11 Editing Font Scaling settings

Enable font scaling to adjust text size automatically across different devices. You can customise the scaling settings in the Font Scaling panel.

Visible – Tick the Enable Scaling box to activate font scaling. Untick the box to keep font sizes fixed.
Font Size (Mobile) – Enter a percentage (up to 100%) to set the font size for mobile devices.
Font Size (Tablet Vertical) – Enter a percentage (up to 100%) to set the font size for tablets in vertical orientation.
Font Size (Tablet Horizontal) – Enter a percentage (up to 100%) to set the font size for tablets in horizontal orientation.

12 Editing Advanced settings

ID or Class Name

To learn about custom styling with ID and Class Name selectors, see Adding CSS.

Component Visibility

Configuring visibility lets you control which devices display the content. The default is all devices. To learn about visibility settings, see Customising Visibility.

Other information

If you find this article useful, you may also be interested in the following:

See Also

Preparing Images

1 Placing the Carousel Component