---
schema_version: "1"
id: 4c99aca52d217eb0dba3a42c6744858495a74dacb5c1eee38671648395e1c8da
title: Carousel Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_carousel_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_carousel_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 5a0ccbdf0607c80893cfa24a8b608e73650a4689569530796a04aff4ae493751
description: For the managed package runtime, this page contains a Carousel LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134983e65">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134983e71">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134983e77">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134983e83">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134983e89">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e65 ">
              <p style="margin-bottom:0;">arrow</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e71 ">
              <p style="margin-bottom:0;">true, false (Default: true)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e77 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e89 ">
              <p style="margin-bottom:0;">To display next and previous navigation arrows, set to false.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e65 ">
              <p style="margin-bottom:0;">extraclass</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e89 ">
              <p style="margin-bottom:0;">Sets extra class to parent level element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e65 ">
              <p style="margin-bottom:0;">interval</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e77 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e89 ">
              <p style="margin-bottom:0;">If set, adds timer in milliseconds, with play and pause controls.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e65 ">
              <p style="margin-bottom:0;">mode</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e71 ">
              <p style="margin-bottom:0;">preview, dots (Default: dots)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e89 ">
              <p style="margin-bottom:0;">Sets which navigation type to display.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e65 ">
              <p style="margin-bottom:0;">thumbnaillimit</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e77 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134983e89 ">
              <p style="margin-bottom:0;">Limits the number of thumbnails to display. Controls thumbnail width when <em>thumnaillimit</em> is greater than the number of carousel items.</p>
            </td>

          </tr>
        </tbody>
      </table>

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

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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d134983e278">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d134983e284">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d134983e290">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d134983e296">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d134983e302">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e278 ">
              <p style="margin-bottom:0;">arrow</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e284 ">
              <p style="margin-bottom:0;">true, false (Default: true)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e290 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e296 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e302 ">
              <p style="margin-bottom:0;">To display next and previous navigation arrows, set to false.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e278 ">
              <p style="margin-bottom:0;">extraclass</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e284 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e290 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e296 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e302 ">
              <p style="margin-bottom:0;">Sets extra class to parent level element. To add multiple classes, use a space to separate each class, such as `classone classtwo'.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e278 ">
              <p style="margin-bottom:0;">interval</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e284 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e290 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e296 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e302 ">
              <p style="margin-bottom:0;">If set, adds timer in milliseconds, with play and pause controls.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e278 ">
              <p style="margin-bottom:0;">mode</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e284 ">
              <p style="margin-bottom:0;">preview, dots (Default: dots)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e290 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e296 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e302 ">
              <p style="margin-bottom:0;">Sets which navigation type to display.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e278 ">
              <p style="margin-bottom:0;">thumbnaillimit</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e284 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e290 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e296 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d134983e302 ">
              <p style="margin-bottom:0;">Limits the number of thumbnails to display. Controls thumbnail width when <em>thumnaillimit</em> is greater than the number of carousel items.</p>
            </td>

          </tr>
        </tbody>
      </table>

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