Carousel Tab

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

  1. Select the Carousel tab 
  2. Click the [Add New Carousel Panel] action button
    Click image to view in full screen

Carousel tab in CMS Lite

The Carousel Panel component will be displayed
Carousel Panel fields

  1. Enter an applicable title, up to a maximum of 40 characters, in the required Heading field
  2. Enter a caption, up to a maximum of 150 characters, in the required Caption field
  3. The caption default is set to the left side of the image.  Choose the drop-down arrow to set to right if desired
  4. Click on the [Browse] button to navigate to an image
    The Image Picker will be displayed
    Image Picker
  5. Search or Navigate to the applicable asset which has been uploaded into Asset folders 
  6. Choose the [Select] to complete the action
    The picker will be closed and the image field will be populated
  7. 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
  8. 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
      browse menu
      ​The applicable picker will be displayed
  9. Search or Navigate to the page/asset
  10. Choose the [Select] to complete the action
    The picker will be closed and the imageLinkUrl field will be populated
  11. The Target defaults to Current Window.  Click the drop-down arrow to select New Window only if linking to an Asset
  12. 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 image sample with heading, caption and link

Carousel Configuration

  1. Click the [Add New Carousel Configuration] action button
    The Carousel Configuration component will be displayed
    Carousel Configuration component
  2. Enter a value between 3 to 10 (seconds) in the Rotation Delay field
  3. 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
  4. 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