Carousel
About
The Carousel component provides a horizontally scrollable container for displaying multiple cards or items. It's designed to work seamlessly with CustomCard components to create interactive, scrollable content galleries.
Properties
Carousel Properties
The Carousel component accepts these properties:
children
ReactNode
Yes
Content to be rendered inside the carousel
Import and Basic Usage
You can import the Carousel component from touchpoint once the package has been installed or made available in your project.
Define onClick
When using Carousel with CustomCard components, define click handlers on the individual cards to handle user interactions. The Carousel itself is a container component.
Access the ConversationHandler method sendChoice
via conversationHandler.sendChoice
to send the user's choice back to NLX.
Read more details about building Custom Components with Touchpoint in the Getting started with Touchpoint components documentation page.
Example
The Carousel component is best used with multiple CustomCard components to create a scrollable interface.
Example Modality Schema
[
{
"id": "uuid",
"thumbnail": "imageUrl",
"label": "Label text",
"value": "Value text"
}
]
Example Carousel Component
const ItemsCarousel = ({ data, conversationHandler }) => {
const [selectedItemId, setSelectedItemId] = React.useState(null);
return html`
<Carousel>
${data.map(
(item) => html`
<CustomCard
key=${item.id}
selected=${item.id === selectedItemId}
onClick=${() => {
setSelectedItemId(item.id);
conversationHandler.sendChoice(item.id);
}}
>
<CustomCardImageRow src=${item.thumbnail} alt="Image" />
<CustomCardRow
left=${html`<BaseText faded>Label</BaseText>`}
right=${html`<BaseText>Value</BaseText>`}
/>
<CustomCardRow
left=${html`<BaseText faded>Label</BaseText>`}
right=${html`<BaseText>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 Components
Custom Cards for card components used within carousels
Typography for text styling within cards
Icons for visual elements in cards
Last updated