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 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.

<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.

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.

<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>

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.

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"}

:::::

::::::