Sliders

Sliders allow users to browse a set of featured content items, one slide at a time using the navigation controls. Each slide in a Slider has a large image and title and may also include a short description. Users can select a slide at any time to see more information and/or load the associated content. Sliders should be used to promote a small set of new or high-priority content within the same CDC site and are typically placed on the site home page. In the Template Package 4.x framework, there are three variations of the Slider component depending on the browsing needs of users - Standard, Large, and Thumbnail.

Standard Slider

Description

Standard Sliders display one slide at a time as a large image. Users can navigate through the set of slides using the navigation arrows that overlay the images or by swiping the images on a touch screen device. In larger viewports, they may also navigate using the navigation bars below the Slider. Clicking or tapping the image or text area opens the associated link or plays the video in place. The Standard Slider will not automatically "play" through the slides.

This example uses the default options:
data-adaptive-height="false"
data-larger-overlay-description="true"

Please see tester view for demo...

Standard Slider: Exception Cases

Description

This demo is meant to demonstrate use cases where content does not fit the normal guidance specificiation. Notice that when images and captions are not of similar dimensions, the slide sizes change. This functions as intended, but the variance in content height may be viewed or percieved as an undesirable experience for some content owners.

Please see tester view for demo...

Standard Slider: Exception Mitigation

Description

This demo is meant to demonstrate parameters which are available to help when content does not fit withint standards and guidance.

Please see tester view for demo...

Carousel Slider

Description

Carousels display one slide at a time as a large image. Users can navigate through the set of slides using the smaller thumbnail images below the Slider. Users can navigate "panes" of thumbnail images using the navigation arrows that overlay these images or by swiping the images on a touch screen device. In larger viewports, they may also navigate the "panes" using the navigation bars below the Slider. Clicking or tapping the large image or text area opens the associated link or plays the video in place. The Carousel will not automatically "play" through the slides.

This example uses the default options:
data-adaptive-height="false"
data-larger-overlay-description="true"

Please see tester view for demo...

Carousel Slider: Exception Cases

Description

This demo is meant to demonstrate use cases where content does not fit the normal guidance specificiation. Notice that when images and captions are not of similar dimensions, the slide sizes change. This functions as intended, but the arrows shift which may be viewed or percieved as an undesirable experience for some content owners.

Please see tester view for demo...

Carousel Slider: Exception Mitigation

Description

This demo is meant to demonstrate parameters which are available to help when content does not fit withint standards and guidance.

Please see tester view for demo...

Thumbnail Slider

Description

Thumbnail sliders display multiple slides at a time as a large image. Users can navigate through the set of slides using the smaller thumbnail images below the Slider. Users can navigate "panes" of thumbnail images using the navigation arrows that overlay these images or by swiping the images on a touch screen device. In larger viewports, they may also navigate the "panes" using the navigation bars below the Slider. Clicking or tapping the large image or text area opens the associated link or plays the video in place. The Thumbnail will not automatically "play" through the slides.

This example uses the default options:
data-adaptive-height="false"
data-larger-overlay-description="true"

Please see tester view for demo...

Thumbnail Slider: Exception Cases

Description

This demo is meant to demonstrate use cases where content does not fit the normal guidance specificiation. Notice that when images and captions are not of similar dimensions, the slide sizes change. This functions as intended, but the arrows shift which may be viewed or percieved as an undesirable experience for some content owners.

Please see tester view for demo...

Thumbnail Slider: Exception Mitigation

Description

This demo is meant to demonstrate parameters which are available to help when content does not fit withint standards and guidance.

Please see tester view for demo...

Thumbnail Slider Options

Description

Additional Options

This page demonstrates additional options available for sliders:

  • data-slides-to-show
  • data-slides-to-scroll
Please see tester view for demo...

Carousel Slider Options

Description

Additional Options

This page demonstrates additional options available for sliders:

  • data-slides-to-show
  • data-slides-to-scroll
Please see tester view for demo...

Slider Arrow Position Options

Description

Arrow Positioning Options

This page demonstrates options available for positioning arrows in sliders:

  • data-arrow-position="%your-option%"
  • Available options for vertical alignment of arrows:
    • "fixed": Vertically aligns arrows to a fixed position at the top of the slide
    • "image-middle": Vertically aligns arrows to the middle of the current image
    • "shortest-image-middle": Vertically aligns arrows to the middle of the shortest image in the slider
    • "tallest-image-middle": Vertically aligns arrows to the middle of the tallest image in the slider
    • default: Vertically aligns arrows to the middle of the the current slide overall (as opposed to the image in the slide)

Note: the following demos have the following options to better exemplify the differences of arrow positioning:
data-cdc-slider="standard-slider"
data-larger-overlay-description="false"

Please see tester view for demo...

Standard Slider: Exception Mitigation 2.0

Description

This demo is meant to demonstrate parameters which are available to help when content does not fit withint standards and guidance. This page was created to be an extension of Mitigation page because not more than 5 sliders can render on a page.

Please see tester view for demo...

Carousel Slider: Exception Mitigation 2.0

Description

This demo is meant to demonstrate parameters which are available to help when content does not fit withint standards and guidance.

Please see tester view for demo...
View Page In: PDF [150k] DOC [150k]
Page last reviewed: