Experiencing an issue?

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 Chinese websites.

See Also

Preparing Images

The Carousel Component displays up to 9 images. We recommended a maximum of 4 pictures. Studies suggest click-through rates decline as the number of carousel images goes beyond 4.

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

  1. Click WEBSITE on the top menu bar. 
  2. On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays. 
  3. Hover your mouse pointer on the Homepage.
  4. Click the Edit button. The Edit Content area opens.
  5. Drag a Carousel Component from the left panel to the page. Place the component immediately below the header.
  6. Hover the mouse pointer on the Carousel Component to display the green toolbar. Click the toolbar Settings button to open the Carousel Settings panel.

 

car-4a.png

 

2  Adding an image

  1. After clicking the toolbar Settings button, the Settings panel opens.
  2. Click the Edit Images tab.
  3. Inside the Edit Images panel, hover the mouse pointer on a grey image container.
  4. Click the Pencil button. The Image Settings panel opens.
  5. To upload an image from your computer, click the Cloud button. To insert an image from your File Manager, click the 3 Dots button.
  6. Click the Back button after uploading or inserting an image.

 

image-4b.png

 

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:

 

3  Adding more images

  1. To insert a second image, hover the mouse pointer on the other grey image container.
  2. Click the Pencil button to open the Edit Images panel.
  3. 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.

 

car-add-image-2b.png

 

4  Adding captions and links

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

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

carousel-9e.png

Caption

Type a word or phrase in the caption field.

  1. Click the built-in translator icon. The Simplified Chinese translation appears in the text field.
  2. To insert a bilingual caption, place the cursor to the left of the Chinese text and type an English word or phrase.

 

trans-btn-1a.png

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. Five controls at the top of the Carousel Settings panel manage image size.

caroseul-5da.png

 

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 and FIT and FILL, see:

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 five controls in the lower half of the Carousel Settings panel. These controls are described in the next 5 sections.

caro-behaviour-1b.png

7  Editing slideshow settings

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

slideshow-a.png

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 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 9 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 above Step 4 Adding Captions and Links.

caption-settins-1.png

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 forwards or backwards.

You can customise the appearance of the arrows inside the Arrow Settings panel.

 

caption-settins-2a.png

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.

 

caption-settins-3a.png

Visible

Check the Visible box to make the dots visible. Uncheck the box to remove the dots from the display.

Dots 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.

Dots 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 Advanced settings

ID or Class Name

To learn about custom styling with ID and Class Name selectors, see:

Component Visibility

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

 

 

Other information

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