The Slider component allows your users to move through multiple panels that include images and content.

This section shows you how to add the Slider component.

Below is an example of the Slider component.

How to add a Slider

Step 1: Go to the page you'd like to add the Slider to (or create a new page) and in the Content tab, Components section, select Slider from the dropdown list.

Step 2: Fill in the fields as per below.

  1. Title - Type in the title for your 'slideshow'.

  2. Slides - Use the dropdown here to add slides. You can either add slides manually (Add Slider slide) or using automation (Add Slider reference slide).

  3. Background - Check this box to apply a background colour.

  4. Theme - Choose the light or dark theme.

  5. Vertical spacing - Add vertical spacing on the component (above, below or above AND below).

Step 3: Fill in the information for each slide - see below.

  1. Title - Add the title for this slide.

  2. Image - Add an image for the slide.

  3. Image position - Choose left or right for the image position.

  4. Date - Add a date (if desired).

  5. Content - Add some content about the slide.

  6. Links - Add any links you'd like to include in the content section of the slide (these are displayed as buttons).

  7. Add another (link) - Add extra links if desired.

  8. Topics - Add in topics if you'd like the slider to include a topic tag.

  9. Add another (topic) - Add extra topics if desired.

  10. Theme - Select the light or dark theme.

  11. Add Slider slide - Add more slides.

Slider reference slides

You can also add 'Slider reference slides'. These slides retrieve the content automatically from an existing page.

Below is a screenshot of the fields for the Slider reference slides.

  1. Reference - Start typing the page title of the page you'd like to reference, and then select the page/content.

  2. Link text - Add in link text, if desired.

  3. Image position - Select right or left for the image. Note: This brings in the xxx image from the page you're linking to.

  4. Theme - Select light or dark theme.

Last updated