Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Web Pattern Library:

Carousel

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.

Carousels

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.

Basic image carousel with thumbnail links

Markup notes

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>

Carousel with arrows

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 snapper container.

Arrow color:

Disabling Looping

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.

Arrow styles

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 snapper container.

Carousel example with Zoom Slides and video

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.

Auto-play Carousel

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">

Carousel with autoplay

To make a particular slide have a custom autoplay interval, you can set the attribute on snapper_item elements.

Carousel with autoplay

Dot navigation options

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.

Same carousel with dot links below

Dots overlapping slides: add the snapper_nav-dots-over class

Same carousel with dot links below

Setting slide widths

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:

Here is an example that has slides that are 50% wide on small screens and 25% wide on medium screens.

Revealing next slides

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.

Carousel of Marketing Modules

This is an example of the sorts of content the carousel can support.

Summer Dresses

We own summer like our company started on the Fourth of July.

Summer Dresses

We own summer like our company started on the Fourth of July.

Summer Dresses

We own summer like our company started on the Fourth of July.

Summer Dresses

We own summer like our company started on the Fourth of July.