<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Arrows:</strong> Applied a transparent background token for the overlay style.</li>
<li><strong>Indicators:</strong> Circular shape in rest state and pill shape when active.</li>
<li><strong>Responsiveness:</strong> Carousel adapts fluidly to different screen sizes.</li>
<li><strong>Status Indicator:</strong> Users can choose between tags or dots.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Carousels show related content in a horizontal, swipeable format, helping users browse items without taking up much space.</p>
<ul>
<li>Highlight important or featured items.</li>
<li>Show repeated content like products, articles, or media.</li>
<li>Combine images and text in a compact, interactive way.</li>
<li>Make it easier to scan through multiple similar items.</li>
</ul>
<p>The carousel component, accordion, message bar, tabs, and view more/less have different use cases. Make sure the components are used correctly to create accessible and useful experiences for all users.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td><a href="/components/popover/">Popover</a></td>
<td>Contains noncritical information or announcements. Carousels commonly display multiple pieces of content within the same space.</td>
</tr>
<tr>
<td><a href="/components/accordion/">Accordion</a></td>
<td>Expands or collapses content within panels. It can be a useful when displaying multiple topics or a large amount of information.</td>
</tr>
<tr>
<td><a href="/components/message-bar/">Message bar</a></td>
<td>Display non-modal messages that inform users of updates or changes to system status. Contextual message bars are most often used in task flows and forms, providing users additional context or information about a task.</td>
</tr>
<tr>
<td><a href="/components/tabs/">Tabs</a></td>
<td>Organize similar content on a screen, providing an easy navigation between different sections of crucial amounts of information.</td>
</tr>
<tr>
<td><a href="/components/view-more-less/">View more/less</a></td>
<td>Reveals or hides contextual content, sometimes in-line and combined with phrases like “Read more” or “Show less.”</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>A carousel component can contain up to three elements.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/carousel?tab=Design#design-layout">layout</a> section.</p>
<details data-name='image-block' data-images='[{"alt":"Anatomy of a carousel component, highlighting the three elements","caption":"1. Container: can contain text, image, and a call to action.\n2. Navigation arrows: icon-only buttons that progress the carousel forward or return to the previous slide.\n3. Pagination indicator: shows how many slides are contained within the carousel.","url":"https://dds.dell.com/site/v3/components/carousel/carousel-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details><h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/designing-effective-carousels/","type":"External"},"title":"Carousel usability","description":"Read NN/g guidelines on how to design effective carousels.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/mobile-carousels/","type":"External"},"description":"Read the NN/g article about carousels on mobile devices.","title":"Mobile carousels","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Carousel component is composed of a collection of slides that can show
multiple pieces of content, such as images, text, or videos, within a single space. They are particularly useful in responsive designs, making it easier for users to find and engage with content.\
\
Carousels help draw attention to important content, such as promotional offers, featured products, or updates.  For this reason, they should be placed in a space of high visibility, like the hero section.

While carousels can be visually appealing and useful for showcasing multiple items, they do come with some drawbacks:

* **Accessibility issues**: Too many slides, or dense slides, can create cognitive overload, and carousels can be difficult to navigate with assistive technologies.
* **Low interaction rates**: Users often only interact with the first slide, leading to low engagement with subsequent slides. For critical information, consider using a static hero.
* **Performance**: Carousels with animation or high-resolution images can slow down page load times.
* **Mobile usability**: Touch interactions can be less reliable and lead to poor performance of the carousel.

Carousels are complex components, especially regarding accessibility and readability. 
Avoid:

* nesting carousels within tabs or pages that don’t have great visibility.
* using more than one carousel per page.
* using more than five slides per carousel.

Carefully review the [accessibility section](/components/carousel/?tab=Design#standards) on this page when designing a carousel.

<details data-name='image-block' data-images='[{"alt":"Example of a carousel in a hero style","caption":"Example of a carousel in a hero style","url":"https://dds.dell.com/site/v3/components/carousel/carousel-usage-hero.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

Carousels can contain more than one item per slide. The number of items per slide can increase due to specified breakpoints. However, showing too many items can cause cognitive overload. 

<details data-name='image-block' data-images='[{"alt":"Example of a carousel with multiple items in a slide","caption":"Example of a carousel with multiple items in a slide","url":"https://dds.dell.com/site/v2/production/54/44/Carousel_Multiple_items_83f5c60afc.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

### Options

Users can select how the status indicator is displayed, choosing between **tag** or **dots.**

* Use **dots** when the carousel is visual and users only need to understand their position among slides. Dots keep the UI lightweight and compact.
* Use **tag** when each slide represents a distinct category or piece of content that benefits from being labeled. Tags provide clarity and context when meaning matters more than space.

<details data-name='image-block' data-images='[{"alt":"Carousel with dots as the status indicator","caption":"Example of dots as the status indicator","url":"https://dds.dell.com/site/v3/components/carousel/carousel-kinds-dots.png"},{"alt":"Carousel with tag as the status indicator","caption":"Example of tag as the status indicator","url":"https://dds.dell.com/site/v3/components/carousel/carousel-kinds-tags.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Sizes

Carousel is responsive to all screen sizes.

To maintain a standardized size within the carousel, always set the same height for all items within the carousel. If the sizes are different, the height of the carousel will be determined by the tallest item.

<details data-name='image-block' data-images='[{"alt":"Example of a carousel with size smaller than 1023 pixels","caption":"Use sizes smaller than 1023 pixels (< 1023) for viewports that accommodate widths of 1023 pixels or less. This size is usually used for mobile experiences.","url":"https://dds.dell.com/site/v3/components/carousel/carousel-sizes-small.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

Smaller sizes will cause reduced functionality for the pagination part of the component. Pagination appears, in this size, as a badge with a counter, indicating which slide is showing out of the total number of slides.

<details data-name='image-block' data-images='[{"alt":"Example of a carousel with size greater than or equal to 1024 pixels","caption":"Use sizes greater than or equal to 1024 pixels (> 1024) for viewports that match 1024 pixels or more in width. This size is usually used for desktop experiences.","url":"https://dds.dell.com/site/v3/components/carousel/carousel-sizes-large.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Layout

There are three layout suggestions for arranging written content along with an image or visual asset within a carousel: left, right, or vertical layout. These different layouts alternate the positions of the text and image within the container, with the content always being edge-to-edge.

Use only one layout option within the same carousel. If you have copy on one side, keep it on the same side throughout all slides, as alternating content sides can cause cumulative shift.

Maintain information alignment and sequence between slides.

<details data-name='image-block' data-images='[{"alt":"Example of the three layout suggestions","caption":"Visual examples of the layout suggestions: left, right, and vertical.","url":"https://dds.dell.com/site/v3/components/carousel/carousel-layout.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

Carousel allows customizing arrows buttons and background through code. When modifying elements, ensure that they maintain sufficient contrast for visibility.

## Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

<details data-name='image-block' data-images='[{"alt":"Carousel building block and slot","caption":"Example of the component with building block and slot.","url":"https://dds.dell.com/site/v3/components/carousel/carousel-slots.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

Auto advance is not available for this component at this time. Users can interact with the carousel through its controls: navigation arrows and [pagination](/components/pagination) indicators. On mobile devices, the carousel responds to swiping left or right or by pressing the arrow buttons.

The carousel component has a loop option that can be turned on or off. When it’s enabled, the carousel will automatically return to its first slide after if the “next” arrow on the last slide is pressed. When not enabled, the first slide’s “previous” arrow will appear in an inactive state, as will the “next” arrow on the last slide.

There are two types of transition effects for carousels: slide or none. A slide animation will smoothly move one slide to the next, creating a sense of continuity for the carousel. Having no animation will change the content on the same slide without a transition effect.

## Standards

### Accessibility

#### **Make sure carousels conform to World Wide Web Consortium (W3C) functionality standards**

In order to maintain consistent and expected component functionality, carousels should always conform to the W3C’s [WAI ARIA Authoring Practices for Carousels](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/). This includes allowing the following keyboard functionality:

**Tab key**: move the focus forward through carousel elements.

**Shift + tab key**: move the focus backward through carousel elements.

WCAG 2.2: [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/quickref/#qr-keyboard-operation-keyboard-operable)

#### **Make sure custom buttons are fully accessible**

Using the included previous and next controls is recommended for easiest accessibility. However, if replacing these with custom controls, ensure that:

* They are at least 40px by 40px in size;
* They use recognizable icons, such as arrows or chevrons;
* Button icons maintain 3:1 contrast minimum against the background (and any button text maintains at least 4.5:1);
* They have keyboard functionality, including a visible keyboard focus indicator of at least 1px border around the entire element, which itself maintains 3:1 minimum contrast against the background.
* WCAG 2.2: [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html), [2.1.1. Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html), [2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)<br></br>

If adding images to slides, avoid ones containing embedded text (where the text is part of the image), unless it is part of a logo. Instead, place that text within the heading or body content.

WCAG 2.2: [1.4.5 Images of Text](https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html)

#### **Use visible slide indicators when possible**

Indicating how many slides are in the carousel and which slide is active helps all users better understand where they are and how much other content is hidden, which is particularly useful for people with a cognitive disability. In larger viewports, these indicators also extend carousel functionality, allowing users to navigate to a specific slide.

#### **Avoid large amounts of slides or slide content**

Large numbers of slides reduce usability and increase cognitive load for users. Large amounts of content per slide has a similar effect. For best usability and accessibility, aim for a maximum of 5 slides, each with no more than 1–2 lines of simple, readable copy.

#### **If disabling transitions, differ slides visibly from each other**

Some people may prefer viewing slides without animated transitions. However, if disabling this feature, be sure to avoid adjacent slides that have only slight visual changes. Vary images or other content visibly from slide to slide to minimize confusion and cognitive load.

### Content

#### **Keep your copy concise**

Carousel is already a complex component, so if it contains text, such as an announcement or a description, it should be concise. The objective is to keep a small amount of information so that users can easily comprehend the content of all the slides. Do not use the H1 class within the carousel.

#### **One call to action per item**

The carousel’s call to actions can be applied as links or buttons. It is recommended to limit the number of calls to action to one per slide or, if containing more than one item per slide, keep one CTA per item. That way, it prevents overloading the slide’s content.

Carousel

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                                 | Collection | CSS var                                           | Preview    |
| ------------------------------------ | ---------- | ------------------------------------------------- | ---------- |
| carousel/gap                         | Component  | `var(--dds-carousel-gap)`                         | \-         |
| carousel/min-width                   | Component  | `var(--dds-carousel-min-width)`                   | \-         |
| button/size/md                       | Component  | `var(--dds-button-size-md)`                       | \-         |
| border/radius/xs                     | Semantic   | `var(--dds-border-radius-xs)`                     | \-         |
| border/width/xs                      | Semantic   | `var(--dds-border-width-xs)`                      | \-         |
| button/background/ghost-rest         | Component  | `var(--dds-button-background-ghost-rest)`         | \-         |
| icon/size/md                         | Component  | `var(--dds-icon-size-md)`                         | \-         |
| color/text/NEUTRAL/rest              | Semantic   | `var(--dds-color-text-neutral-rest)`              | \#1D2C3B   |
| size/4                               | Global     | `var(--dds-size-4)`                               | \-         |
| size/16                              | Global     | `var(--dds-size-16)`                              | \-         |
| color/purple/10                      | Global     | `var(--dds-color-purple-10)`                      | \#FBEBFF   |
| color/purple/80                      | Global     | `var(--dds-color-purple-80)`                      | \#66278F   |
| carousel/status-padding              | Internal   | `var(--dds-carousel-status-padding)`              | \-         |
| badge/gap/lg                         | Component  | `var(--dds-badge-gap-lg)`                         | \-         |
| badge/padding-horizontal/lg          | Component  | `var(--dds-badge-padding-horizontal-lg)`          | \-         |
| badge/size/lg                        | Component  | `var(--dds-badge-size-lg)`                        | \-         |
| border/radius/rounded                | Semantic   | `var(--dds-border-radius-rounded)`                | \-         |
| color/background/NEUTRAL/subtle-rest | Semantic   | `var(--dds-color-background-neutral-subtle-rest)` | \-         |
| color/border/NEUTRAL/subtle          | Semantic   | `var(--dds-color-border-neutral-subtle)`          | \#5C6E7E   |
| icon/size/sm                         | Component  | `var(--dds-icon-size-sm)`                         | \-         |
| carousel/indicators-gap              | Component  | `var(--dds-carousel-indicators-gap)`              | \-         |
| carousel/button/width/circle         | Component  | `var(--dds-carousel-button-width-circle)`         | \-         |
| carousel/button/height               | Component  | `var(--dds-carousel-button-height)`               | \-         |
| carousel/button/icon/width/circle    | Component  | `var(--dds-carousel-button-icon-width-circle)`    | \-         |
| carousel/button/icon/height          | Component  | `var(--dds-carousel-button-icon-height)`          | \-         |
| carousel/button/background           | Component  | `var(--dds-carousel-button-background)`           | \#FFFFFFCC |
| border/radius/sm                     | Semantic   | `var(--dds-border-radius-sm)`                     | \-         |
| carousel/button/width/pill           | Component  | `var(--dds-carousel-button-width-pill)`           | \-         |
| carousel/button/icon/width/pill      | Component  | `var(--dds-carousel-button-icon-width-pill)`      | \-         |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-carousel--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-carousel--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-carousel--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-carousel--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-carousel--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-carousel--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Carousel is a container that enables users to navigate horizontally to view different content placed inside the component. 