Carousel

Live demo

Renders a carousel.

Node name : carousel

Attributes

Attribute	Type	Required	Default value	Description
source	object[]	true		An array of elements to display.
page-size	number	false	1	Number of items per page.
scroll-step	number	false	1	Number of items to scroll.
auto-scroll-interval	number	false	0	Auto scroll interval in milliseconds. If 0, auto-scroll is disabled.
circular	bool	false		Value indicating whether the scroll is circular.
navigation-arrows	bool	false	true	Value indicating whether to show navigation arrows.
pagination-indicators	bool	false	true	Value indicating whether to show pagination indicators.

Example

<carousel source="@Fields.Products">
  <carousel-item-template>
    <text>$Item.Caption</text>
  </carousel-item-template>
</carousel>

Item template

It's necessary to define the content template by using the carousel-item-template node.

To use the template item which is the the array element being iterated, use the variable $Item.

<carousel source="@Fields.Products">
  <carousel-item-template>
    <text>$Item.Caption</text>
  </carousel-item-template>
</carousel>

Also, you can set an alias for the template item by setting the attribute item on the carousel-item-template node.

<carousel source="@Fields.Products">
  <carousel-item-template item="Product">
    <text>$Product.Caption</text>
  </carousel-item-template>
</carousel>