Image Carousel

The Carousel is a type of feature player that allows CDC website users to scroll through a set of featured content items, one at a time. Each featured item has a small thumbnail image, a large image, and short title and can also include a short description (caption). Users can select an item from the thumbnail slider at the bottom to view a larger version in the top area of the Carousel. This RD component should be used to promote high-priority content or support browsing a set of related content items available within the same CDC site.

When to Use

• You want to promote new or high priority HTML content such as updated guidelines, a news article, or new data on a site home page.
• You want to provide users with a way to browse a moderate number of related content items such as photos, guidelines, events, or press materials.
• You have a moderate number of featured items, 4 to 20 items.
• All featured content items are available as web pages on CDC.gov. Avoid using non-CDC and non-HTML document links.
• You have resources to create images that are appropriately sized as content changes.

When to Consider Something Else

• You want to feature more than 20 content items.
• 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 RD component only because it is more “interactive”.

Other Guidance

• Number of Pages: 2 to 5 “pages” of content items
• Number of Features per Page: 2 to 4 items per page
• Titles: Use short titles for each feature, 3 words or less. Longer titles will wrap and take up more space in Viewport 1 (phone view).
• Descriptions: Avoid using descriptions for items in the Thumbnail Slider. Even in larger Viewports, these will wrap and may cause some layout inconsistencies.
• Links: Avoid linking to non-CDC web pages and non-HTML documents. This RD component is intended for promoting content within the same CDC website and the content should exist as web pages. Including other types of links will negatively affect the layout.
• Images: Regardless of the size of the Thumbnail Slider implemented, the images should all be the same dimension (aspect ratio) in order to avoid “jumping” as the featured items are displayed. Source images should be sized based on their largest display in the top area of the Carousel.
• Performance: Avoid using many sliders across your site and placing multiple sliders on the same page. Simple content layouts are often better for performance on mobile devices and usability.

Before inserting the image carousel, make certain you have uploaded all carousel images to the WCMS. (Tip: Use images of similar dimensions.)

Insert an image carousel by clicking the Add Element button in Visual Composer and selecting Image Carousel as the content type. (The Image Carousel is a single-use content type, but you can create a reusable carousel with the Visual Composer Module.)

In the Settings form for the Image Carousel, set the option Enable Large-Image Viewer to Yes.

For the image carousel on this page, the Settings are as follows:

• Number of Images per Page — Four
• Thumbnail Text Display — Title and Caption
• Large Image Text Display — Title and Caption
• Enable Large-Image Display — Yes

Each image in the slider has its own settings.  For the example on this page, each image has a display Title and a caption. You can also set an Image Link Target Page.