Carousel / Thumbnail Slider

Overview

A carousel is a feature player that allows visitors to change the display by clicking on a thumbnail image in a slider control at the bottom.  This content element is typically placed on a site home page or high-profile landing page to promote a small set of new or high-priority content.

The carousel element in the WCMS supports two distinct layouts:  carousel and thumbnail slider. Each featured item in a carousel has a large image or video, a thumbnail image, and short title. It can also include a caption.  Without the large-image display, the player is called a thumbnail slider.

The example above is an image carousel with captions.  (Note that the carousel changes to a standard slider in the mobile viewports.) More examples, including a video carousel and a thumbnail slider, are included on this page.

Videos can be added with a YouTube reference ID or selected from the WCMS.  Links can be placed on featured images and within captions.

Usage

Use a feature player such as a carousel when:

• On a home page or critical landing page, you want to promote new or high-priority HTML content such as updated guidelines, a news article, or new data.
• You have a small number of featured items, 3 to 5 items.
• All featured content items are available as web pages on CDC.gov.  Avoid using non-CDC and non-HTML document links.

Consider something other than a feature player when:

• You have more than five content items (check out the list module for longer lists).
• Some or most of the content items you want to feature are non-CDC or non-HTML document links.
• You are trying to provide primary navigation to lower-level pages in your site.
• You are considering this content element only because it is “interactive.”

General Guidelines

• The WCMS allows mixing of images and videos in the same carousel, but generally we do not recommend it.
• Make certain each featured item has a title. (Captions are optional.)  The carousel player can also have a title, if it’s needed to provide context.
• Use short titles for each feature, three words or less. Longer titles will wrap and take up more space in viewports 1 and 2 (phone view).
• Keep carousels as simple and uncluttered as possible. If captions are not needed, don’t use them. (In mobile view, the visitor has to click a hide/show toggle to display the caption.)
• Avoid linking to external sites and non-HTML documents. If you must use special links, follow CDC’s linking policies.
• Avoid using many feature players (carousels or sliders) across your site and placing multiple feature players on the same page. Simple content layouts are often better for performance on mobile devices and usability.

Using Media

• Make certain images have good alt text. (For guidelines on writing effective alt text, see the topic basic images.)
• Choose high-quality images with the same aspect ratio and size.  (For small differences in image size, there is an auto-fit option.)
• Avoid images with embedded text.
• Always pick the smallest version of an image that will work for the location and need. (When an image is uploaded to the WCMS, up to four alternative sizes are generated, based on the size of the original.)
• When featuring a referenced YouTube video  (i.e., a video not managed in the WCMS), prepare a thumbnail image (800 x 500) and upload it to the WCMS.  (For YouTube videos managed in the WCMS, the system pulls the thumbnail associated with that video.)

Examples

The carousel above  is similar to the example at the top of the page, but it holds six featured images with only three thumbnails displaying at a time, so previous and next controls are automatically enabled. (The visitor can also paginate by clicking the buttons below the thumbnails.) You can select the number of thumbnails to display:  three, four, or five.

The example above is a clone of the carousel before it, but it’s set to display as a thumbnail slider (that is, without the large images). And it’s set to display with the titles only (no captions).

The carousel above is a video carousel.  Note how the visitor interacts with each video:  The video does not auto-play. Instead, when the visitor pages to a video and clicks the player button within the slider, a “modal” window displays with the full video controls.