Carousel Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Carousel 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 Carousel Lightning Web Component displays a series of images inside a container. Images display one at a time and you can set how to navigate between images (by image thumbnail or colored dots).

Available c-carousel Attributes

Attribute	Value	Type	Description
arrow	true, false (Default: true)	boolean	To display next and previous navigation arrows, set to false.
extraclass		string	Sets extra class to parent level element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
interval		number	If set, adds timer in milliseconds, with play and pause controls.
mode	preview, dots (Default: dots)	string	Sets which navigation type to display.
thumbnaillimit		number	Limits the number of thumbnails to display. Controls thumbnail width when thumnaillimit is greater than the number of carousel items.

Example c-carousel 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

Available c-carousel Attributes

Attribute	Value	Type	Description
arrow	true, false (Default: true)	boolean	To display next and previous navigation arrows, set to false.
extraclass		string	Sets extra class to parent level element. To add multiple classes, use a space to separate each class, such as `classone classtwo'.
interval		number	If set, adds timer in milliseconds, with play and pause controls.
mode	preview, dots (Default: dots)	string	Sets which navigation type to display.
thumbnaillimit		number	Limits the number of thumbnails to display. Controls thumbnail width when thumnaillimit is greater than the number of carousel items.

Example c-carousel 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>