Recruitment Marketing Public

A carousel is a slideshow that allows for the cycling of a series of content within a content block on a page within your career site.

Carousels are made up of a series of slides, which can be cycled manually by the visitor or can be configured to auto-cycle after a specified amount of time. Within each slide, there can be one or more items of content.

Common scenarios where carousel blocks are utilized include:

• Page header images
• Employee testimonials
• Displaying awards/logos

An example of a carousel is shown here:

Creating a carousel

To create a new carousel:

1. From the side menu, under Content, click Careers Website.
2. On the Carousels page, select New from the top right of the screen.
3. Complete the following information:
   1. Name: This is the friendly name used to identify this carousel.
   2. Item count: This is the number of slides that will be included in the carousel. Additional slides can be added later.
4. Click Save.

Adding or editing slide content

1. On the Carousels page, click the link under the Items column.
   

2. Select the slide that you want to update from the selector at the top of the page

   

3. From the drop-down list, select the Number of columns that you would like to feature on this slide.
   
   Each slide can have a different number of columns.

   

4. Once you have selected the desired number of columns for the slide, start adding content by clicking Add (or Edit) on the column you would like to update.

   

5. Add content to the slide by completing the edit screen

   

   Options available include:

   1. Kind: Specify whether this is Text, Image, or Video.
   2. Choose image: Select the image that you would like to appear in this column.

   3. Choose video: Select the video that you would like to appear in this column.

      Note:

      You can not choose a video and an image together.

   4. Alternative description: Specify the alternative text or description for the item to enhance accessibility.
   5. Header: Defines any header text to appear on the column.
   6. Description: Defines text to appear as the body of the column.
6. Click Save to keep the changes to that column.
7. Repeat the process for other columns within the slide.
8. Use the selector at the top to toggle to other slides within the carousel, and repeat steps 3 to 6 above.

Other options available

• The ordering of the items can be amended by clicking the relevant Move Position (bidirectional arrow symbol) icon.
• If your career website is configured to present multiple languages, the Translation (globe) icon will be available to allow translations of the text on the slide. 
• Individual columns can be removed from a slide by clicking the Delete (trash can) icon.
• To remove an entire slide from the deck, click the Delete item button.

Adding a Carousel to a web page

Once you have created a carousel, you can add it to a page in your career site by adding the Carousel block to that particular page.

1. Using the Page Editor, add a block to display the carousel.

2. From the Content Block Library, under Misc blocks, hover over Carousel and click Add.

   

3. Now that the block has been added, click the Edit icon to configure the display of the block. The following settings are available:
   1. Carousel name: This is the name of the carousel that will be presented in this particular block
   2. Show directional arrows: Determines whether directional arrows will be displayed at the right and left of the carousel to allow the visitor to scroll to the next slide.
   3. Show indicator dots: Determines whether indicator dots, showing the number of slides, and allowing the visitor to scroll to a specific slide, will be visible under the carousel.
   4. Scrolling interval: Determines whether the slides will auto-scroll after the specified period.
4. Click the Save button to keep the settings.

The styling of the carousel block can be adapted by adding appropriate CSS to the relevant page theme.

Optimizing carousel button placement for mobile viewing

By default, image carousels, such as those using the Bootstrap 5 theme, display "Next" and "Previous" navigation buttons vertically centered on the left and right sides of the carousel. This standard behavior can sometimes result in the buttons appearing over the images, which may impact how the visual content is viewed, particularly on smaller mobile screens.

If you prefer a different layout, such as repositioning the navigation buttons to avoid overlapping important parts of an image, contact us for assistance. We can work with you to tailor the appearance to better suit your content and design goals.

When requesting adjustments, provide the specific URLs of all pages where the affected carousels are located. This helps us quickly assess and implement any required changes, ensuring the carousel remains functional and visually clear across all screen sizes.

Default carousel buttons:

Mobile view:

Before:

After: