Carousels
We currently utilize a plugin called Flickity to generate “touch, responsive, flickable carousels”. We use carousels on our help screens with the goal of making the information provided more easily understood.
Carousel Cells
Each carousel cell is able to include a graphic element, a title, and some paragraph text.
Carousel Structure
It is easy to create new carousels. The required <html> structure is a .carousel parent container and .carousel-call children containers. Flickity does the rest.
Text Alignment
Text will default to left-aligned, but can be changed to center-aligned…
Text Alignment
By adding a .center class to <div class="carousel-cell">.
Flickity carousels are controllable using the dot navigation, the next and previous buttons, or by swiping with your mouse or finger (on touch devices). Also, once the carousel has :focus it becomes keyboard navigable.
Note that on smaller screens, the next and previous buttons are set to display: none; to conserve as much space as possible. Users on devices with smaller screens are more apt to swipe to navigate on these screens.
<div class="carousel" data-flickity-options="{ 'wrapAround': true, 'prevNextButtons': true }">
<div class="carousel-cell center">
<div class="graphic">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 510"><circle class="color-one" cx="255" cy="255" r="255"/><path class="color-two" d="M85 265h338l23.73 10a17.25 17.25 0 0 0 3.74-5.55c5-11.79-2.83-26.42-17.59-32.67-8.28-3.53-63.16-23.49-110.87-38.42-.1 0-.2-.1-.3-.1a53.28 53.28 0 0 1-32.35-29C282.39 153.49 269.55 143 255 143s-27.29 10.49-34.36 26.22a53 53 0 0 1-32.35 29c-.1 0-.2.1-.3.1-47.71 14.86-102.59 34.93-110.87 38.46-14.76 6.35-22.64 21-17.59 32.67a20.45 20.45 0 0 0 3.74 5.55zm26.44-10L255 195.54 399 255zm188.92 75.68L261.13 294a8.88 8.88 0 0 0-12.13 0l-39.23 36.83a8.68 8.68 0 0 0-2.74 6.33v93.13a8.78 8.78 0 0 0 8.82 8.73h78.35a8.78 8.78 0 0 0 8.82-8.73v-93.15a8.32 8.32 0 0 0-2.66-6.43zm-45.31-7a8.63 8.63 0 1 1 8.71-8.63 8.68 8.68 0 0 1-8.71 8.64zm-2.28-17a8.77 8.77 0 0 0-6 5.32c-2.43-3.11-4.87-6.23-7-9.54l5.87-5.52a95.83 95.83 0 0 0 7.13 9.79z"/><path class="white" d="M231 94.81A24 24 0 0 1 255.94 71a24 24 0 0 1 23 22.9 23.75 23.75 0 0 1-7.88 18.64A31.43 31.43 0 0 0 260.92 136v7a30.4 30.4 0 0 0-12 0v-7.15A43 43 0 0 1 263 103.73a12.1 12.1 0 1 0-16.56-17.64 11.87 11.87 0 0 0-3.69 8.72 5.81 5.81 0 0 1-5.88 5.85 5.87 5.87 0 0 1-5.87-5.85zM218 414h74v-38h-74zm50.28-118.31a34 34 0 0 1-.91 4.11l-6.19-5.8a2.88 2.88 0 0 0-.71-.5c.81-5.62.51-11.44.21-17.26l-.61-11.24h8l.6 10.82c.33 6.42.62 13.04-.39 19.87zm-5 16.46c-.1.2-.2.5-.3.7a9.92 9.92 0 0 1-1.73 2.81 6.38 6.38 0 0 1-5 2.21c-4.26 0-7.6-3.52-8.52-4.62-.2-.3-.5-.6-.81-1-2.43-3.11-4.86-6.22-7-9.54a113.27 113.27 0 0 1-15.21-33.62c-.3-1.6-.71-3.21-.91-4.81a15.27 15.27 0 0 1 .71-7 12.57 12.57 0 0 1 2-3.61 23.8 23.8 0 0 1 5.78-5c5.87-3.71 11.35-5.62 16.72-5.62 7.3 0 13.79 3.51 16.73 9.13.3.5.95 2.37 1.15 2.87H257c-1.93-1.81-4.77-4.17-7.81-4.17a20.1 20.1 0 0 0-9.73 2.81c-.91.5-1.92 1-2.84 1.6-1.82 1.11-4 2.71-4.66 4.72a7.17 7.17 0 0 0-.2 4.22 15.16 15.16 0 0 0 .61 2.81 103.2 103.2 0 0 0 13.27 30 95.83 95.83 0 0 0 7.1 9.74c.3.4.71.8 1 1.2a7.41 7.41 0 0 0 1.73 1.51c.4-.91.71-1.91 1.11-2.81a9.44 9.44 0 0 1 6.73 5.47z"/></svg>
</div>
<h1>Carousel Cells</h1>
<p>Each carousel cell is able to include a graphic element, a title, and some paragraph text.</p>
</div>
<div class="carousel-cell">
<h1>Carousel Structure</h1>
<p>It is easy to create new carousels. The required <code><html></code> structure is a <code>.carousel</code> parent container and <code>.carousel-call</code> children containers. <a href="https://flickity.metafizzy.co/" target="_blank">Flickity</a> does the rest.</p>
</div>
<div class="carousel-cell">
<h1>Text Alignment</h1>
<p>Text will default to left-aligned, but can be changed to center-aligned…</p>
</div>
<div class="carousel-cell center">
<h1>Text Alignment</h1>
<p>By adding a <code>.center</code> class to <code><div class="carousel-cell"></code>.</p>
</div>
</div>