Carousel Tab
Web Style and Accessibility guidelines do not support the use of carousels. We recommend inserting a banner graphic for illustration purposes, callouts for regular content and alerts for temporary messages.
You should not use this feature without first discussing it with your GCPE Communications Director.
Reasons to Avoid Carousels
Carousels are not recommended due to accessibility and usability concerns. Here are a few reasons to avoid them:
- may not work well with screen readers
- slow page loading time
- banner blindness - carousels look like ads and may be ignored
- human eye reacts to movement - takes control away from the person reading the page
- people rarely click on any slide after the first one - not everything can be important!
Add Carousel Panel
- Select the Carousel tab
- Click the [Add New Carousel Panel] action button
Click image to view in full screen
The Carousel Panel component will be displayed
- Enter an applicable title, up to a maximum of 40 characters, in the required Heading field
- Enter a caption, up to a maximum of 150 characters, in the required Caption field
- The caption default is set to the left side of the image. Choose the drop-down arrow to set to right if desired
- Click on the [Browse] button to navigate to an image
The Image Picker will be displayed
- Search or Navigate to the applicable asset which has been uploaded into Asset folders
- Choose the [Select] to complete the action
The picker will be closed and the image field will be populated - Enter an applicable link, up to a maximum of 40 characters, in the required Link Title field. Ensure you choose text that ensures accessibility, for example, Read more about x x x
- In the Link URL field, you may to link to a page/asset, or enter an external URL
- Enter a secure external URL (include https://), or
- Select the Browse drop-down menu and choose the applicable option
The applicable picker will be displayed
- Search or Navigate to the page/asset
- Choose the [Select] to complete the action
The picker will be closed and the imageLinkUrl field will be populated - The Target defaults to Current Window. Click the drop-down arrow to select New Window only if linking to an Asset
- Repeat steps 2 - 13 to add up to five carousel images. Once the maximum has been reached the [Add New Carousel Panel] action button will no longer be available
Sample
Heading: Keep British Columbia Safe
Caption: Wildfires can happen anywhere. Nearly half of them can be prevented.
Title Link: Learn what you can do to help
Position: Left
Carousel Configuration
- Click the [Add New Carousel Configuration] action button
The Carousel Configuration component will be displayed
- Enter a value between 3 to 10 (seconds) in the Rotation Delay field
- Enter a value between 0 to 100 (times) in the # of Rotations field. 1 rotation will display each image at least once and then stop when the first image is redisplayed; 0 = rotate endlessly until user interacts with left or right arrows
- The Randomize Start field defaults to NO (displays images in the panel order). Choose the drop-down arrow to change the option to YES to randomly display images