Carousel

Carousel Rendered Example

About

Horizontally scrollable container for multiple cards or items. Typically combined with CustomCard.

Properties

Property
Type
Required
Description

children

ReactNode

Yes

Content inside the carousel

className

string

No

Additional classes

Usage notes

  • Define click handlers on child cards; Carousel is a container only.

  • Use conversationHandler.sendChoice to send selections.

Example

This example uses a modality named ItemsCarousel in the NLX platform with the schema:

[
  {
    "id": "uuid",
    "thumbnail": "imageUrl",
    "label": "Label text",
    "value": "Value text"
  }
]

Items Carousel Example

const ItemsCarousel = ({ data, conversationHandler }) => {
  const [selectedId, setSelectedId] = React.useState(null);

  return html`
    <Carousel>
      ${data.map((item) => html`
        <CustomCard
          key=${item.id}
          selected=${item.id === selectedId}
          onClick=${() => {
            setSelectedId(item.id);
            conversationHandler.sendChoice(item.id);
          }}
        >
          <CustomCardImageRow src=${item.thumbnail} alt=${item.label} />
          <CustomCardRow
            left=${html`<BaseText faded>Label</BaseText>`}
            right=${html`<BaseText>${item.value}</BaseText>`}
          />
        </CustomCard>
      `)}
    </Carousel>
  `;
};

// Register component when creating touchpoint
const touchpoint = await create({
  config: {
    applicationUrl: "YOUR_APPLICATION_URL",
    headers: { "nlx-api-key": "YOUR_API_KEY" },
    languageCode: "en-US",
  },
  customModalities: {
    ItemsCarouselModality: ItemsCarousel,
  },
});

Related

Last updated