Skip to main content Skip to navigation

Create an image carousel

A carousel adds a revolving sequence of images to your page, with or without overlaid text.

  1. Browse to the Components Editor page where you want to add an image carousel.

  2. Go to Edit > Edit centre content:

    The SiteBuilder 'Edit' menu, with the 'Edit centre content' option highlighted

  3. Place your cursor where you want to add the carousel.

  4. Select Presentation > Carousel from the left-hand menu:

    The 'Add images/media' menu, with the 'Carousel' option highlighted

    Alternatively, select an existing carousel and then select Settings in the component toolbar:

    The component toolbar for a carousel, with the 'Settings' option highlighted

  5. The Add a carousel pop-up appears:

    The 'Add a carousel' pop-up

  6. Select the required check-boxes for the following display properties:

    • Full width: The carousel spans the available space, with no margin either side.

    • Flush top: Remove any space between the carousel and the component above it, or the top of the page, depending where it's placed.

  7. Use the Text colour drop-down to select whether text overlaid on the carousel is Light or Dark.

  8. Each slide within the carousel has a section to specify its properties:

    1. To select the image for the slide, do one of the following:

      • Use the Image text field to enter the URL of the image you want to display. You can use relative or absolute URLs.

      • Select the button to locate an image that's already been uploaded to your site.

      • Drag and drop files into the dotted-line box.

      • Select the Browse button to locate and upload a file on your computer.

      • Select an image under Recently uploaded files, if any are present.

    2. Optionally, in the Link to box, specify a web address that the Heading text will link to. You can enter the address directly in the box, or select the button to choose another page in your site.

    3. In the Heading box, enter the text you want to appear as the heading for the text box overlaid on this image in the carousel.

    4. In the Text box, enter the text you want to appear below the heading in the overlaid text box.

  9. To add another slide, select the Add slide button. There is one of these buttons at the top and bottom of the pop-up, to add slides at either end of the carousel.

  10. To change the order of slides, select the up or down arrow buttons in the top right of the corresponding section.

  11. To delete a slide, select Delete slide in the top right of that slide's section.

  12. When you've finished editing your slides, select Add carousel.

  13. The carousel appears on your page. Visitors to the page can use the controls within the text box overlay to pause the slideshow, scroll through the slides, or select a specific slide by its number in the sequence:

    An example of a carousel component, with the slide controls highlighted

  14. When you've finished editing your page, select Publish.

Related articles