As of Feb 2020, we've refreshed the carousel component to support the features the site needs in one place. Those options are documented here.
The carousel builds on top of CSS scroll snap. In addition to snap scrolling, it offers non-standard features like smooth-scrolling slide navigation, and endless looping in either direction.
For browsers that don’t support the snapping, the carousel is still navigable because degrades to a simple container with horizontal scrolling. Other features like arrow, thumbnail, and dot navigation will work in these environments as well. This component runs on the Snapper project, which will be treated as library file that will receive regular updates.
When templating the markup for a Carousel, be sure to give each item a unique ID attribute, and set the href of that item's corresponding nav link to match that ID. This will preserve deep-linking to items in the carousel, as well as allowing the thumbs to jump to particular slides when clicked. Also, see tech recommendations for marking up each image with multiple sources for different display resolutions.
A thumbnail link that points to a video should have a class of "snapper_navitem-icon" and child "i" element with a class of "icon-video-play-light":
<a href="#video-example-c" class="snapper_navitem-icon"> <i class="icon-video-play-light"></i> <img src="...img src here" alt="View photo 3"> </a>
Add arrow buttons to either side of the carousel for navigating to the next or previous slide with the
data-snapper-nextprev attribute on the
The carousel is designed to loop endlessly in both directions, as long as there are at least 3 slides.
If you add the
data-snapper-noloop attribute to a snapper, it will disable looping an stop when you reach either end.
When looping is disabled, snapper will also add a
snapper_nextprev-disabled class to the next or prev links when they have no more slides in a particular direction.
By default, this class sets the link opacity to semi-transparent and disables focus and clickability.
You can also style this class to hide the link entirely.
The default arrow style is blue on a white circle background. To customize, assign an arrow color, background color and/or shape class to the
You can place whatever content you want inside slides. Image zoom components are designed to integrate well, as one example. Also, videos, as this last slide shows. Autoplay video will play when a slide is visible and pause when it is hidden.
To auto-play the carousel, add the
data-snapper-autoplay attribute with a value for the duration each slide should be shown (in millseconds). Tapping the navigation arrow, thumbnails or swiping on a mobile device will stop the auto-play behavior and let the user take control. The demo below auto-plays with a duration of 3 seconds (300ms).
<div class="snapper" data-snapper-nextprev data-snapper-autoplay="3000">
To make a particular slide have a custom autoplay interval, you can set the attribute on
To add dot navigation, add the markup for the anchor links as seen in the example below. Be sure to use unique IDs and reference those in each link to associate them properly. If you want dots on top, move the dot markup to the top.
Dots overlapping slides: add the
You can set carousel items to any width and the carousel will snap to their start point. That said, to make it easier we have made some pre-built width classes you can use for carousel widths and also revealing future slides.
They are as follows:
snapper-show1Show one slide at a time on all breakpoints
snapper-show2Show two slides at a time on all breakpoints
snapper-show3Show three slides at a time on all breakpoints
snapper-show4Show four slides at a time on all breakpoints
snapper-show5Show five slides at a time on all breakpoints
snapper-show1-midstarting at medium viewport sizes up, show one slide at a time
snapper-show2-midstarting at medium viewport sizes up, show two slides at a time
snapper-show3-midstarting at medium viewport sizes up, show three slides at a time
snapper-show4-midstarting at medium viewport sizes up, show four slides at a time
snapper-show5-midstarting at medium viewport sizes up, show five slides at a time
snapper-show1-wideat wide viewport sizes up, show one slide at a time
snapper-show2-wideat wide viewport sizes up, show two slides at a time
snapper-show3-wideat wide viewport sizes up, show three slides at a time
snapper-show4-wideat wide viewport sizes up, show four slides at a time
snapper-show5-wideat wide viewport sizes up, show five slides at a time
Here is an example that has slides that are 50% wide on small screens and 25% wide on medium screens.
To show a partial view of the next slide, you can set the width of the slides to a number that won't cleanly add up to 100%. Or, you can add a class of `snapper_revealquarter` or `snapper_revealhalf` to one of the show classes above.
Here is an example that shows 2 and reveals a half of the next item.
This is an example of the sorts of content the carousel can support.