Flex Slider (Standard)

The standard flex slider is a type of feature player that allows CDC website users to scroll through a set of featured content items, one item at a time. Each featured item has a large image and short title and may also include a short description. Scrolling is automatic, but users can make a selection at any time. This RD component should be used to promote a small set of new or high-priority content within the same CDC site and is typically placed on the site home page.

When to Use

• You want to promote new or high priority HTML content such as updated guidelines, a news article, or new data on your site home page.
• 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.
• You have resources to create images that are appropriately sized as content changes.

When to Consider Something Else

• You want to feature more than 5 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

• 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).
• 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 may affect the RD component layout.
• Images: Regardless of the size of the Standard Slider implemented, the images should all be the same dimension (aspect ratio) in order to avoid “jumping” as the featured items are displayed.
• 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 slider, make certain you have uploaded all slider images to the WCMS. (Tip: Use images of similar dimensions.)

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

For the thumbnail slider on this page, the Settings are as follows:

• Enable Automated Slideshow — Yes
• Slideshow Speed (milliseconds) — 7000
• Fade-in Duration (milliseconds) — 600
• Enable Animation Loop — 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.