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.

Auto Width vs Fixed Width Carousel Layouts

In Replo, carousels can have two layouts:

1. Fixed width, where each slide takes up a certain percentage of the carousel's width, regardless of how wide the slide content is

2. Auto width, where each slide's width is determined by how wide its content is

Fixed width is great for creating carousels with "Panels", where you have a certain number of slides always shown. Auto width is great for creating slider-style carousels, where you can see multiple images at a time and a preview of the next item which might be partially off-screen.

Using Dynamic Data with Carousels

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.

Auto scroll to Selected Variant

You can configure your product images carousel to automatically scroll to a specific slide when a specific variant is selected. To do this:

1. Configure the carousel to be set to Product Images using dynamic data

2. Under "Auto Scroll To" in config, select "Selected Variant" > "Featured Image"

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.

You can also use the "Scroll On Click" config setting to ensure that the carousel automatically moves to any slide which is clicked.

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.

Infinitely Repeated Carousels

To make your carousel infinitely repeat after reaching the end, make sure to toggle ON the "Infinite Repeat Slides" toggle in the Config tab.

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 Accessibility

It's notoriously hard to get carousel accessibility correct. Replo 📄 Carousels are correctly accessible in line with the standards set by the Web Content Accessibility Initiative.

1. Replo carousels follow the ARIA Carousel (Image Rotator or Slideshow) pattern correctly.

2. Replo carousels support correctly accessible text-direction when set to rotate vertically.

3. When visitors have indicated that they prefer reduced motion, the carousel slides will not animate slide transitions.

4. Carousels implement correct controls so that screenreaders will read the slide labels correctly and slides can be navigated with keyboards.

5. Replo carousels correctly use the aria-current attribute to indicate the currently selected slide and indicators.

6. Each carousel indicator in Replo has a correct aria-label attribute indicating to screenreaders that the buttons can be used to go to specific slides.

7. All carousel components including slides and indicators are correctly accessible using keyboard navigation.

8. Carousels correctly identify themselves as ARIA Landmark Regions.

9. The carousel Accessibility menu supports specifying a short description as text which will be read by screenreaders when they encounter carousels.

10. Product images carousels will correctly report their alt text if set in Shopify.

Learn more about accessibility at 📄 Accessibility in Replo

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. See Swatches for a video guide on how to set this up!

Carousel Guides

Carousel with Custom Scrolling Indicators

Automatically Scrolling to the Selected Variant's Featured Image

Troubleshooting

Why do my slides look different on my live site than they do in the editor?

This difference typically occurs because carousel slides have 📄 States(often named "Active", but they could have different names) that control their appearance when active. While these states are automatically applied to the current slide on the live site, you'll need to manually test these states in the editor to preview the active slide styling. Check your states configuration panel to identify and test any slide states. To learn more about working with states, see 📄 States.

Liquid Integrations

Some integrations, like 📄 Judge.me, rely on liquid code which assumes the product liquid variable is compiled during page load. This might not be the case for infinitely repeated carousels, since Replo has to re-create the slides to produce an infinite scroll.

If you see integrations not showing inside some products but not others, for example 📄 Shopify Product Reviews integrations, your review provider may rely on liquid rendering.

In this case, you can set the carousel to not infinite repeat to ensure the integrations display correctly.