CarouselItem Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a CarouselItem LWC ReadMe for each Vlocity release.

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The CarouselItem Lightning Web Component is the basic element inside the Carousel Lightning Web Component. Each carousel item populates the carousel images.

Available c-carousel-item Attributes

Attribute	Value	Type	Required	Description
assertive-text		string		Adds assistive text for the image.
description		string		Adds text to display under the header.
header		string		Adds text to display under the image.
src	URL	string	yes	Adds the image source path.
thumbnail	URL	string		Adds the thumbnail source path.

Example c-carousel-item Component

<c-carousel
  interval="5000"
  arrow="false"
  thumbnaillimit="3"
>
  <c-carousel-item
    src="{item.image}"
    header="{item.title}"
    description="{item.description}"
  >
  </c-carousel-item>

  <c-carousel-item
    src="{item.image}"
    header="{item.title}"
    description="{item.description}"
  >
  </c-carousel-item>

  <c-carousel-item
    src="{item.image}"
    header="{item.title}"
    description="{item.description}"
  >
  </c-carousel-item>
</c-carousel>

Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The CarouselItem Lightning Web Component is the basic element inside the Carousel Lightning Web Component. Each carousel item populates the carousel images.

Available c-carousel-item Attributes

Attribute	Value	Type	Required	Description
assertive-text		string		Adds assistive text for the image.
description		string		Adds text to display under the header.
header		string		Adds text to display under the image.
src	URL	string	yes	Adds the image source path.
thumbnail	URL	string		Adds the thumbnail source path.

Example c-carousel-item Component

<c-carousel
  interval="5000"
  arrow="false"
  thumbnaillimit="3"
>
  <c-carousel-item
    src="{item.image}"
    header="{item.title}"
    description="{item.description}"
  >
  </c-carousel-item>

  <c-carousel-item
    src="{item.image}"
    header="{item.title}"
    description="{item.description}"
  >
  </c-carousel-item>

  <c-carousel-item
    src="{item.image}"
    header="{item.title}"
    description="{item.description}"
  >
  </c-carousel-item>
</c-carousel>