---
schema_version: "1"
id: f93e8a24d1f3fa4f7f495f2b70c747ed3a4996241e726b298fd858a643d4878f
title: Carousel Image
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/carouselImage/lightning-carousel-image.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-carousel-image.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 4709c2893ee7e3401b32f11cdb3121ceb328e124e227de69613a30b9ffada093
products:
  - Lightning Component Reference
---

# Carousel Image

**`lightning-carousel-image`**

Specifies an image that's used in `lightning-carousel`, including description and title

**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="carouselImage" model="lwc" namespace="lightning"}


:::::

:::::tab

Use the `lightning-carousel-image` component to specify images for the
[`lightning-carousel`](/docs/platform/lightning-component-reference/guide/lightning-carousel.html) component.
You can specify up to six images, which then appear in the order that you
list them in the `lightning-carousel` component.

For each image, use the `src` attribute to specify the path to the image.
Optionally use `header` and `description` attributes to provide a header
and descriptive text that the carousel shows below the image.
You can also hyperlink the images with the `href` attribute.

Use the `alternative-text` attribute to supply assistive text for each image.

```html
<lightning-carousel-image
        src = "https://v1.lightningdesignsystem.com/assets/images/carousel/carousel-01.jpg"
        header = "First Card"
        description = "First card description."
        alternative-text = "First card accessible description."
        href = "https://www.example.com">
    </lightning-carousel-image>
```

## Design

Use `lightning-carousel-image` within `lightning-carousel`, which 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/)                                                 | [Carousel](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) |

## Use Images in Your Org

To use images in your org, upload them as static resources in the Static Resources
page in Setup. To reference a resource in `lightning-carousel-image`, use `{property}`
syntax in your `src` attribute.

If the image path is invalid or the image doesn’t load because the user is
offline or another reason, the description and alternative text replace the image.

This example uses static resources uploaded as a single image, and images uploaded in a zip file.

<!-- prettier-ignore-start -->
```html
<template>
    <div class="slds-size_1-of-4">
        <lightning-carousel>
            <lightning-carousel-image
                src={companyLogoUrl}
                header="Company logo"
                description="Company logo uploaded to a static resource"
                alternative-text="Company logo"
            >
            </lightning-carousel-image>
            <lightning-carousel-image
                src={product1Url}
                header="Fantastic product 1"
                description="Fantastic product image in a zip file"
                alternative-text="Fantastic product 1"
            >
            </lightning-carousel-image>
            <lightning-carousel-image
                src={product2Url}
                header="Fantastic product 2"
                description="Fantastic product image in a zip file"
                alternative-text="Fantastic product 2"
            >
            </lightning-carousel-image>
        </lightning-carousel>
    </div>
</template>
```
<!-- prettier-ignore-end -->

The company logo was uploaded as a single image to a static resource named `company_logo` and imported as `companyLogo`. The Product1 and Product2 images were uploaded in a zip file to a static resource named `company_products` and imported as `companyProducts`.

```js
import { LightningElement } from "lwc";
import companyLogo from "@salesforce/resourceUrl/company_logo";
import companyProducts from "@salesforce/resourceUrl/company_products";

export default class CarouselStaticResources extends LightningElement {
  // Expose the static resource URL for use in the template
  companyLogoUrl = companyLogo;

  // Expose URL of assets included inside an archive file
  product1Url = companyProducts + "/product1.png";
  product2Url = companyProducts + "/product2.png";
}
```

## Accessibility

`lightning-carousel-image` includes accessibility features provided by `lightning-carousel`. A carousel image appears with header text and a description. Use the `alternative-text` attribute to specify assistive text for each image.

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

- The indicator button (tab's anchor) of a selected image has `aria-selected="true"`, and all other tabs have `aria-selected="false"`.
- The tab's anchor of a selected image has `tabindex="0"`, and all other tabs have `tabindex="-1"`.
- Each image container (tab panel) contains an element with `role="tabpanel"`.
- Each tab panel has an `aria-labelledby` attribute whose value is the ID of its associated indicator button.
- Each tab panel has an `aria-hidden` attribute whose value is toggled based on whether the panel is visible.


:::::

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

:::::

::::::