Carousel / Thumbnail Slider

Building in the WCMS

Creating a Carousel

Carousels are like many Visual Composer elements in that you must first create a container and then insert content elements into the container:

  • Creating the container (the player): Use the “Add Element” tool in Visual Composer to add a carousel or thumbnail slider.  When prompted for element type, select “Carousel.” In the Settings pop-up, select / enter options for the carousel container.
  • Adding images / videos: Once you have added the carousel, you can add a feature item by clicking inside the carousel container in Visual Composer and then, when prompted, selecting the type of item you want to add: YouTube video or image.

To edit a feature item, hover over it and click its pencil tool.  (To edit the carousel container, click the pencil tool above the container.  Note that Visual Composer has excellent on-hover tips to ensure that you’re accessing the correct content element.)

Important note: Don’t forget to include a title for each image / video.  Titles are required for optimal display in mobile viewports.

Notes on Carousel Settings

  • To have the content element display as a thumbnail slider, select “No (thumbslider slider style)” for “Enable Large-Image Viewer.”
  • Note that you must uncheck “Hide Title” if you want the carousel title to display.
  • You can select “auto-fit” for images, but this is recommended only when there is a very small difference in image height. It’s always better to use images that are the same height.

Notes on Image / Video Settings

  • For each image / video, include a brief title.
  • For each referenced video, make certain you have a thumbnail image (preferably 800 x 500) as well as any other assets required for 508 compliance (such as a transcript file).
  • Ensure that each image has good alt text.  (See topic on basic images for tips on writing effective alt text as well as other tips and guidelines on images.)
WCMS Quick Facts

To create a thumbnail slider using the “Carousel” content element, select “No” for “Enable Large-Image Viewer” (carousel Settings pop-up).

To ensure optimal display in mobile viewports, enter a title for every image / video.

To include a referenced YouTube video, make certain you have a thumbnail (800 x 500) uploaded to the WCMS.

Page last reviewed: May 10, 2018
Content source: WCMS / Template Team