---
schema_version: "1"
id: 8be957f6fbbc89ec9965e0b9fe887f002bb324827ce7a1ea0b28498a5d02271d
title: Carousel
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/carousel/lightning-carousel.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-carousel.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 81a32d5612278bc2636465482faf96f79f79f82a7be42d3f00dca44eb7c0e270
products:
  - Lightning Component Reference
---

# Carousel

**`lightning-carousel`**

A collection of images that are displayed one at a time.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="carousel" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-carousel` component shows a series of images in a single
container, with image indicators and a control button
below the image panel. Only images passed in `lightning-carousel-image`
components are supported.

Use [`lightning-carousel-image`](/docs/platform/lightning-component-reference/guide/lightning-carousel-image.html)
components nested in `lightning-carousel` to specify
up to six images. For each image, optionally provide a header and descriptive text
that the carousel displays below the image. You can also hyperlink the images.

If you specify more than six images, the carousel shows the first six and ignores the rest.

The images are shown in the order that you list them in the `lightning-carousel` component.

The carousel shows one image at a time, and you can select particular
images by clicking the indicators. The carousel can display up to six indicators only.
On mobile devices, you can also swipe an image to scroll to the next image.

By default, the carousel auto scrolls and loops through the images repeatedly.
Each image is visible for 5 seconds before the carousel scrolls to the next image.
The control button enables you to pause and restart the automatic scrolling.

## Design

`lightning-carousel` implements the carousel blueprint in the Salesforce Lightning Design System (SLDS). The carousel adapts to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

|                | SLDS 1                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :-------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Carousel](https://v1.lightningdesignsystem.com/components/carousel/)                                                 | [Cards](https://www.lightningdesignsystem.com/components/carousel/)                                             |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Customize Carousel Behavior

Disable auto scrolling and remove the control button by including the
`disable-auto-scroll` attribute in the `lightning-carousel` tag. The user
must then use the indicator buttons to display each image.

Disable continuous looping by including the `disable-auto-refresh` attribute. The
images scroll one time through and stop at the last image if you include `disable-auto-refresh`
but not `disable-auto-scroll`.

Change the number of seconds each image is visible for by using the `scroll-duration` attribute.

For example, you can create three images for the carousel and disable automatic scrolling.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-carousel disable-auto-scroll>
        <lightning-carousel-image
            src="path/to/carousel-01.jpg"
            header="First card"
            description="First card description"
            alternative-text="This is a card"
            href="https://www.example.com"
        >
        </lightning-carousel-image>
        <lightning-carousel-image
            src="path/to/carousel-02.jpg"
            header="Second card"
            description="Second card description"
            alternative-text="This is a card"
            href="https://www.example.com"
        >
        </lightning-carousel-image>
        <lightning-carousel-image
            src="path/to/carousel-03.jpg"
            header="Third card"
            description="Third card description"
            alternative-text="This is a card"
            href="https://www.example.com"
        >
        </lightning-carousel-image>
    </lightning-carousel>
</template>
```
<!-- prettier-ignore-end -->

## Component Styling

To implement additional styling for the `lightning-carousel` component, use the Lightning Design
System [utility classes](https://v1.lightningdesignsystem.com/utilities/alignment/).

## Accessibility

`lightning-carousel` implements the [SLDS carousel blueprint](https://v1.lightningdesignsystem.com/components/carousel/), which follows the [WAI-ARIA Authoring Practices Guide for the carousel pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/). Use the Tab key to move focus to the carousel, then tab again to focus on the indicator buttons. Use right and left arrow keys to scroll to the next or previous image.

`lightning-carousel` observes these roles, states, and properties.

- The indicator buttons use a `ul` element with `role="tablist"`.
- Each indicator button uses an `li` element with `role="presentation"`.
- Each list item wraps an anchor tag with `role="tab"`.
- Each anchor tag has `aria-selected="false"` when it's not selected.


:::::

:::::tab
::component-specification{component="carousel" model="lwc" namespace="lightning"}

:::::

::::::