Carousels
Purpose
Carousels are comprised of a rotating set of images, primarily used to highlight content that is prominent but not essential to completing a task. They contain between two to five images, accompanied by an equal number of selectable dots that indicate the number and sequence of the images. Navigational arrows allow the customer to rotate the images manually.
Requirements
The DLS carousel and gallery components require both dls.css and dls.js due to the complexities involved with their logic, functionality, and animations.
Auto-Rotate
Usage
Auto-rotate carousels automatically display content on rotation, based on a specified delay. Use when the rotating images are equal in importance or prominence.
Specs - Hero Carousel - Auto-Rotate - Desktop
Content = Use when content is light and easily digestible
Alignment = Carousel controls centered on component
Left and Right Glyphs = Medium, White (dark theme), Gray 05 (light theme)
Carousel Controls = White (active), 50% opacity (default) dark theme; Bright Blue (active), Gray 04 (default) light theme
Amount = Limit 5 elements in the carousel
Animation = Text and image should ease in
Interaction = Left and right glyphs are clickable; images auto-rotate on a set timeframe
Specs - Hero Carousel - Auto-Rotate - Mobile
Carousel Controls = White (active), 50% opacity (default) dark theme; Bright Blue (active), Gray 04 (default) light theme
Interaction = Swipeable left and right; left and right glyphs are clickable
Example - Hero Carousel
<!-- Desktop View -->
<section class="carousel text-align-center dls-white hidden-sm-down" data-toggle="carousel" data-autoplay="true" data-animate="true"
aria-labelledby="offers-carousel-heading">
<h3 id="offers-carousel-heading" class="sr-only">Offers Carousel</h3>
<ul class="carousel-inner carousel-inner-padding">
<!-- Carousel item desktop-->
<li class="hero flex dls-white carousel-item pad-0" aria-hidden="false">
<div class="hero-bg" style="background-image:url('../../assets/img/visuals/components/carousels/image-1.jpg');">
</div>
<div class="carousel-text-overlay pad-2 margin-1-tb flex flex-justify-center col-md-5">
<div class="flex flex-column flex-justify-center flex-align-center stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<div class="margin-2-t">
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</div>
</li>
<!-- Carousel item desktop-->
<li class="hero flex dls-white carousel-item pad-0" aria-hidden="true">
<div class="hero-bg" data-img="../../assets/img/visuals/components/carousels/image-2.jpg">
</div>
<div class="carousel-text-overlay pad-2 margin-1-tb flex flex-justify-center col-md-5">
<div class="flex flex-column flex-justify-center flex-align-center stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<div class="margin-2-t">
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</div>
</li>
<!-- Carousel item desktop-->
<li class="hero flex dls-white carousel-item pad-0" aria-hidden="true">
<div class="hero-bg" data-img="../../assets/img/visuals/components/carousels/image-3.jpg">
</div>
<div class="carousel-text-overlay pad-2 margin-1-tb flex flex-justify-center col-md-5">
<div class="flex flex-column flex-justify-center flex-align-center stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<div class="margin-2-t">
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</div>
</li>
</ul>
<!-- Carousel controls -->
<div class="carousel-controls">
<button class="carousel-control balance-play" data-control="prev">
<i data-dls-glyph="left" data-dls-glyph-size="lg" data-dls-icon-role="decorative" title="Previous Slide"></i>
</button>
<ol class="carousel-indicators"><!-- Automatically added --></ol>
<button class="carousel-control" data-control="next">
<i data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative" title="Next Slide"></i>
</button>
<button class="carousel-control" data-control="play">
<i data-dls-icon="play" data-dls-icon-variant="filled" data-dls-icon-role="decorative" title="Play"></i>
</button>
<button class="carousel-control" data-control="pause">
<i data-dls-icon="pause" data-dls-icon-variant="filled" data-dls-icon-role="decorative" title="Pause"></i>
</button>
<div aria-live="polite" aria-atomic="true" class="sr-only"></div>
</div>
</section>
<!--Mobile View-->
<section class="carousel text-align-center dls-white hidden-md-up" data-toggle="carousel" data-autoplay="true" data-animate="true"
aria-labelledby="offers-carousel-heading">
<h3 id="offers-carousel-heading" class="sr-only">Offers Carousel</h3>
<ul class="carousel-inner carousel-inner-padding">
<!-- Carousel item mobile -->
<li class="hero flex flex-justify-center dls-white carousel-item pad-0-lr pad-0-t" aria-hidden="false">
<div class="hero-bg" style="background-image:url('../../assets/img/visuals/components/carousels/image-1.jpg');">
</div>
<div class="carousel-text-overlay pad-2 margin-1-tb margin-2-lr flex">
<div class="flex flex-column flex-justify-center flex-align-center stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</li>
<!-- Carousel item mobile -->
<li class="hero flex flex-justify-center dls-white carousel-item pad-0-lr pad-0-t" aria-hidden="true">
<div class="hero-bg" data-img="../../assets/img/visuals/components/carousels/image-2.jpg">
</div>
<div class="carousel-text-overlay pad-2 margin-1-tb margin-2-lr flex">
<div class="flex flex-column flex-justify-center flex-align-center stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</li>
<!-- Carousel item mobile -->
<li class="hero flex flex-justify-center dls-white carousel-item pad-0-lr pad-0-t" aria-hidden="true">
<div class="hero-bg" data-img="../../assets/img/visuals/components/carousels/image-3.jpg">
</div>
<div class="carousel-text-overlay pad-2 margin-1-tb margin-2-lr flex">
<div class="flex flex-column flex-justify-center flex-align-center stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</li>
</ul>
<!-- Carousel controls -->
<div class="carousel-controls">
<button class="carousel-control balance-play" data-control="prev">
<i data-dls-glyph="left" data-dls-glyph-size="lg" title="Previous Slide"></i>
</button>
<ol class="carousel-indicators"><!-- Automatically added --></ol>
<button class="carousel-control" data-control="next">
<i data-dls-glyph="right" data-dls-glyph-size="lg" title="Next Slide"></i>
</button>
<button class="carousel-control" data-control="play">
<i data-dls-icon="play" data-dls-icon-variant="filled" title="Play"></i>
</button>
<button class="carousel-control" data-control="pause">
<i data-dls-icon="pause" data-dls-icon-variant="filled" title="Pause"></i>
</button>
<div aria-live="polite" aria-atomic="true" class="sr-only"></div>
</div>
</section>Manual Control
Usage
Manual control carousels allow the customer to discover the content of a carousel by using the controls provided. These require larger navigational arrows for easy discoverability. Use this carousel when some content is more important or prominent than others.
Specs - Manual Control - Desktop
Content = Use when content is more robust and the user needs to manually change to the next carousel
Left and Right Icons = Medium, White
Carousel Controls = White (active), 50% opacity (default)
Icon & Carousel Controls Background = Black, 50% opacity
Interaction = Left and right icons are clickable; images do not auto-rotate
Specs - Manual Control - Mobile
Left and Right Glyphs = Medium, White
Carousel Controls = White (active), 50% opacity (default)
Interaction = Swipeable left and right; left and right glyphs are clickable; images do not auto-rotate
Example - Manually Controlled Carousel
<!--Desktop View-->
<section class="carousel carousel-manual text-align-center dls-white hidden-sm-down" data-toggle="carousel" data-autoplay="false" data-animate="true"
aria-labelledby="offers-carousel-heading">
<h3 id="offers-carousel-heading" class="sr-only">Offers Carousel</h3>
<ul class="carousel-inner">
<!-- Carousel item desktop -->
<li class="hero flex dls-white carousel-item pad-0" aria-hidden="false">
<div class="hero-bg" style="background-image:url('../../assets/img/visuals/components/carousels/image-1.jpg');">
</div>
<div class="carousel-text-overlay margin-1-tb col-md-5 pad-0-lr">
<div class="flex flex-column flex-justify-center flex-align-center pad-2 stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06 ">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<div class="margin-3-t">
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</div>
</li>
<!-- Carousel item desktop -->
<li class="hero flex dls-white carousel-item pad-0" aria-hidden="true">
<div class="hero-bg" data-img="../../assets/img/visuals/components/carousels/image-2.jpg">
</div>
<div class="carousel-text-overlay margin-1-tb col-md-5 pad-0-lr">
<div class="flex flex-column flex-justify-center flex-align-center pad-2 stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06 ">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<div class="margin-3-t">
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</div>
</li>
<!-- Carousel item desktop -->
<li class="hero flex dls-white carousel-item pad-0" aria-hidden="true">
<div class="hero-bg" data-img="../../assets/img/visuals/components/carousels/image-3.jpg">
</div>
<div class="carousel-text-overlay margin-1-tb col-md-5 pad-0-lr">
<div class="flex flex-column flex-justify-center flex-align-center pad-2 stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06 ">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<div class="margin-3-t">
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</div>
</li>
</ul>
<!-- Carousel controls -->
<div class="carousel-controls">
<button class="carousel-control" data-control="prev">
<i data-dls-icon="left" data-dls-icon-size="md" data-dls-icon-variant="filled" title="Previous Slide"></i>
</button>
<ol class="carousel-indicators"><!-- Automatically added --></ol>
<button class="carousel-control" data-control="next">
<i data-dls-icon="right" data-dls-icon-size="md" data-dls-icon-variant="filled" title="Next Slide"></i>
</button>
<div aria-live="polite" aria-atomic="true" class="sr-only"></div>
</div>
</section>
<!--Mobile view-->
<section class="carousel carousel-manual text-align-center dls-white hidden-md-up" data-toggle="carousel" data-autoplay="false" data-animate="true"
aria-labelledby="offers-carousel-heading">
<h3 id="offers-carousel-heading" class="sr-only">Offers Carousel</h3>
<ul class="carousel-inner carousel-inner-padding">
<!-- Carousel item mobile -->
<li class="hero flex flex-justify-center dls-white carousel-item pad-0-lr pad-0-t" aria-hidden="false">
<div class="hero-bg" style="background-image:url('../../assets/img/visuals/components/carousels/image-1.jpg');">
</div>
<div class="carousel-text-overlay pad-2 margin-1-tb margin-2-lr flex">
<div class="flex flex-column flex-justify-center flex-align-center stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</li>
<!-- Carousel item mobile -->
<li class="hero flex flex-justify-center dls-white carousel-item pad-0-lr pad-0-t" aria-hidden="true">
<div class="hero-bg" data-img="../../assets/img/visuals/components/carousels/image-2.jpg">
</div>
<div class="carousel-text-overlay pad-2 margin-1-tb margin-2-lr flex">
<div class="flex flex-column flex-justify-center flex-align-center stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</li>
<!-- Carousel item mobile -->
<li class="hero flex flex-justify-center dls-white carousel-item pad-0-lr pad-0-t" aria-hidden="true">
<div class="hero-bg" data-img="../../assets/img/visuals/components/carousels/image-3.jpg">
</div>
<div class="carousel-text-overlay pad-2 margin-1-tb margin-2-lr flex">
<div class="flex flex-column flex-justify-center flex-align-center stack">
<h2 class="heading-6 anim-slide-up anim-delay-2 dls-deep-blue">Which Card is Right for You?</h2>
<p class="body-3 anim-slide-up anim-delay-3 dls-gray-06">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
<a class="btn btn-bright-blue anim-slide-up anim-delay-4" href="#example">View All Cards</a>
</div>
</div>
</li>
</ul>
<!-- Carousel controls -->
<div class="carousel-controls">
<button class="carousel-control" data-control="prev">
<i data-dls-icon="left" data-dls-icon-size="md" data-dls-icon-variant="filled" title="Previous Slide"></i>
</button>
<ol class="carousel-indicators"><!-- Automatically added --></ol>
<button class="carousel-control" data-control="next">
<i data-dls-icon="right" data-dls-icon-size="md" data-dls-icon-variant="filled" title="Next Slide"></i>
</button>
<div aria-live="polite" aria-atomic="true" class="sr-only"></div>
</div>
</section>Card Carousels
Usage
Card carousels contain multiple, smaller pieces of content per rotation. This carousel can be used to house information with navigational links.
Specs - Single Card Carousel
Use the single card carousel when the carousel’s maximum width is 350px or smaller.
Left and Right Glyphs = Medium, White (dark theme), Gray 05 (light theme)
Carousel Controls = White (active), 50% opacity (default) dark theme; Bright Blue (active), Gray 04 (default) light theme
Interaction = Left and right glyphs are clickable; images do not auto-rotate
Example - Single Card Carousel
<section class="carousel carousel-multi-card text-align-left" data-toggle="carousel" data-autoplay="false"
data-animate="true"
aria-labelledby="offers-carousel-heading">
<h3 id="offers-carousel-heading" class="sr-only">Offers Carousel</h3>
<ul class="carousel-inner">
<!-- Carousel item -->
<li class="hero carousel-item dls-gray-01-bg" aria-hidden="false">
<div class="row">
<div class="col-md-6 col-lg-4 col-sm-12">
<div class="card">
<img src="../../assets/img/visuals/components/cards/multi-1.jpg"
class="fluid" alt="" />
<hr>
<div class="pad-2">
<h3 class="pad-1-b heading-3 dls-bright-blue">
Holiday Celebration Eats
</h3>
<p class="body-1">
Don't feel like cooking this holiday? Check out these best spots in NY to celebrate with friends and family.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-sm-12">
<div class="card">
<img src="../../assets/img/visuals/components/cards/multi-2.jpg"
class="fluid" alt="" />
<hr>
<div class="pad-2">
<h3 class="pad-1-b heading-3 dls-bright-blue">
Coffee Champions
</h3>
<p class="body-1">
You love your coffee. Visit some of the top rated coffee shops in NYC.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-sm-12">
<div class="card">
<img src="../../assets/img/visuals/components/cards/multi-3.jpg"
class="fluid" alt="" />
<hr>
<div class="pad-2">
<h3 class="pad-1-b heading-3 dls-bright-blue">
Business Travel in NYC
</h3>
<p class="body-1">
Traveling on business doesn't have to be hectic.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-sm-12">
<div class="card">
<img src="../../assets/img/visuals/components/cards/multi-4.jpg"
class="fluid" alt="" />
<hr>
<div class="pad-2">
<h3 class="pad-1-b heading-3 dls-bright-blue">
Explore NYC
</h3>
<p class="body-1">
See all the great things NYC has to offer.
</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Carousel controls -->
<div class="carousel-controls dark-controls">
<button class="carousel-control" data-control="prev">
<i data-dls-glyph="left" data-dls-glyph-size="lg" title="Previous Slide"></i>
</button>
<ol class="carousel-indicators"><!-- Automatically added --></ol>
<button class="carousel-control" data-control="next">
<i data-dls-glyph="right" data-dls-glyph-size="lg" title="Next Slide"></i>
</button>
<div aria-live="polite" aria-atomic="true" class="sr-only"></div>
</div>
</section>Specs - Multi-Card Carousel
Left and Right Icons = Medium, White (dark theme), Gray 05 (light theme)
Carousel Controls = White (active), 50% opacity (default) dark theme; Bright Blue (active), Gray 04 (default) light theme
Interaction = Left and right icons are clickable; images do not auto-rotate
Example - Multi-Card Carousel
<section class="carousel carousel-multi-card text-align-left" data-toggle="carousel" data-autoplay="false"
data-animate="true"
aria-labelledby="offers-carousel-heading">
<h3 id="offers-carousel-heading" class="sr-only">Offers Carousel</h3>
<ul class="carousel-inner">
<!-- Carousel item -->
<li class="hero carousel-item dls-gray-01-bg" aria-hidden="false">
<div class="row">
<div class="col-md-6 col-lg-4 col-sm-12">
<div class="card">
<img src="../../assets/img/visuals/components/cards/multi-1.jpg"
class="fluid" alt="" />
<hr>
<div class="pad-2">
<h3 class="pad-1-b heading-3 dls-bright-blue">
Holiday Celebration Eats
</h3>
<p class="body-1">
Don't feel like cooking this holiday? Check out these best spots in NY to celebrate with friends and family.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-sm-12">
<div class="card">
<img src="../../assets/img/visuals/components/cards/multi-2.jpg"
class="fluid" alt="" />
<hr>
<div class="pad-2">
<h3 class="pad-1-b heading-3 dls-bright-blue">
Coffee Champions
</h3>
<p class="body-1">
You love your coffee. Visit some of the top rated coffee shops in NYC.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-sm-12">
<div class="card">
<img src="../../assets/img/visuals/components/cards/multi-3.jpg"
class="fluid" alt="" />
<hr>
<div class="pad-2">
<h3 class="pad-1-b heading-3 dls-bright-blue">
Business Travel in NYC
</h3>
<p class="body-1">
Traveling on business doesn't have to be hectic.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-sm-12">
<div class="card">
<img src="../../assets/img/visuals/components/cards/multi-4.jpg"
class="fluid" alt="" />
<hr>
<div class="pad-2">
<h3 class="pad-1-b heading-3 dls-bright-blue">
Explore NYC
</h3>
<p class="body-1">
See all the great things NYC has to offer.
</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Carousel controls -->
<div class="carousel-controls dark-controls">
<button class="carousel-control" data-control="prev">
<i data-dls-icon="left" data-dls-icon-size="md" data-dls-icon-variant="filled" title="Previous Slide"></i>
</button>
<ol class="carousel-indicators"><!-- Automatically added --></ol>
<button class="carousel-control" data-control="next" aria-label="Next slide">
<i data-dls-icon="right" data-dls-icon-size="md" data-dls-icon-variant="filled" title="Next Slide"></i>
</button>
<div aria-live="polite" aria-atomic="true" class="sr-only"></div>
</div>
</section>Functionality
If you are using dls.js, reference the attributes below for functionality.
| Attribute Name | Options | Description |
|---|---|---|
data-toggle |
carousel |
Creates a carousel object; required for functionality using dls.js. |
data-control |
prev/next |
Placed on the previous/next arrow buttons to transition the slides to show the previous/next slide. |
data-autoplay |
true/false |
Slides automatically cycle at given interval speed. Default is false. |
data-animate |
true/false |
When slides change, backgrounds undergo fade transitions. |
data-interval |
number of seconds in ms |
Length of time between slide transitions. If not set, default interval is 5000ms. |
data-current |
number ranging from 0 to slide total - 1 |
Index of currently selected slide. If not set, default is 0 (first slide). |
data-img |
background-img source url |
Lazy loads images on slides using data-img instead of style="background-image:url('');. Can be used on all slides except initial. |
| Function Name | Parameters | Description |
|---|---|---|
carousel.next() |
none |
Switch to next slide. |
carousel.prev() |
none |
Switch to previous slide. |
carousel.play() |
none |
Start auto play cycle. |
carousel.pause() |
none |
Pause auto play cycle. |
carousel.changeActiveSlide(i) |
number ranging from 0 to slide total - 1 |
Manually set the currently active slide. |