Skip to main

Design System

  • Welcome
  • Colors
  • Typography
  • Spacing

CSS

  • Utilities
  • Compositions

Component Library

  • Aside
  • Audio Player
  • Authors
  • Banners
  • Block quotes
  • Brand
  • Breadcrumbs
  • Browser compatibility table
  • Button
  • Callout
  • Cards
  • Carousel
  • Code blocks
  • Compare
  • Counter
  • Details
  • Eyebrow
  • Floating Action Button
  • Feature Card
  • Figure
  • Fixed width Image
  • Form Fields
  • Headline
  • Hero
  • Hero Image
  • Icon Button
  • Indicator
  • Labels
  • Lists
  • Numbered headers
  • Page Header
  • Pagination
  • Pill
  • Preview Pagination
  • Prose
  • Stack Nav
  • Stats
  • Status List
  • Tables
  • Tabs
  • Generated table of contents
  • Toggle Switch
  • Tooltips

Carousel - Component

View full screen
Code

Source (Nunjucks)

<web-carousel>
<div class="carousel">
<button class="icon-button" data-direction="prev" aria-label="back">
{% include "icons/carat-back.svg" %}
</button>
<div class="carousel__track reel" data-scroll="snap">
{% for item in data.items %}
{# Note, we're just repeating the same content in an iteration #}
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
{% include "icons/mortarboard.svg" %}
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>

<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible episodes
covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
{% endfor %}
</div>
<button class="icon-button" data-direction="next" aria-label="forward">
{% include "icons/carat-forward.svg" %}
</button>
</div>
</web-carousel>

Output

<web-carousel>
<div class="carousel">
<button class="icon-button" data-direction="prev" aria-label="back">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>

<path
d="M15.41 16.0699L10.83 11.7053L15.41 7.34075L14 6L8 11.7053L14 17.4106L15.41 16.0699Z"
/>

</svg>
</button>
<div class="carousel__track reel" data-scroll="snap">
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>

<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>

<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>

</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>

<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>

<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>

<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>

</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>

<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>

<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>

<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>

</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>

<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>

<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>

<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>

</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>

<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>

<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>

<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>

</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>

<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>

<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>

<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>

</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>

<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>

<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>

<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>

</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>

<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>

<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>

<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>

</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>

<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
</div>
<button class="icon-button" data-direction="next" aria-label="forward">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>

<path
d="M8 7.34075L12.58 11.7053L8 16.0699L9.41 17.4106L15.41 11.7053L9.41 6L8 7.34075Z"
/>

</svg>
</button>
</div>
</web-carousel>

Information

The carousel has a dependency of The Reel layout composition. It is an extension of that layout's scrolling capability.

Key links

  • Sass File
  • The Reel

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.