Full Width Carousel

SCSS Location: /styles/scss/partial/_full-width-carousel.scss
  • Status: Design
  • Status: Development
  • Status: Documentation


A carousel that spans the entire viewport and displays images with optional captions.


The carousel should display one slide at a time, with a reduced-opacity preview of the previous and next slides visible.

The carousel should rotate by one slide at a time, and rotate infinitely.

As a slide is rotated to the center position, it should transition to full opacity, and its caption should fade in.

As the carousel is rotated, the counter should display which slide is currently being viewed and the total number of slides.

At a screen width of 768px and above, the entire previous and next slide previews should be clickable to advance the carousel.


Can be used within any page that leverages flexible content.

The maximum character count for a slide caption is 90.