Carousel

Replo supports showing dynamic data in scrolling carousels. A common use for carousels is to show a list of content that the user can navigate through with arrows or buttons, like product reviews or images.

To Add a Carousel:

1. Navigate to the page you want to add a Carousel to in the editor.
2. On the left side of the editor, click the "Components" toggle, then search for "Data Collection Carousel."
3. Drag the Carousel into the page.

To Add a Product Images Carousel:

1. Navigate to the page you want to add a Carousel to in the editor.
2. On the left side of the editor, click the "Components" toggle, then search for "Product Images Carousel."
3. Drag the Carousel into the page.

To Set Data Displayed in the Carousel:

1. Select the Carousel you want to edit.
2. In the right-side editor pane, scroll down to "Carousel Items", then click to select the Data Collection which will be the items of the Carousel.
3. You can now drag other components into the Carousel, and set their images, text, etc using Dynamic Data.

Moving to the Next or Previous Slide:

Replo Carousel templates come with arrows that move to the next or previous slide of the Carousel. However, you can also add the ability to move to the next or previous slide of the carousel when any component inside it is clicked.

To do this, use the "Move To Previous Carousel Item" and "Move to Next Carousel Item" Interactions. For more information, see Interactions.

Carousel Indicators

Replo Carousel templates come with indicators that show the current slide of the Carousel. To customize the display of the carousel indicators, you can use the "This Is The Current Carousel Item" State type. For more information, see States.

Additional Carousel States

Replo Carousels also support two more State types:

1. Carousel Is At End: This state is active when the last item in the Carousel is showing.
2. Carousel Is At Start: This state is active when the first item in the Carousel is showing.

Carousel Where Images are Different for Each Product Variant

To create a carousel which changes based on which product variant is selected, you can use Swatches.

Carousel Guides

Carousel with Custom Scrolling Indicators

Automatically Scrolling to the Selected Variant's Featured Image