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.
Navigate to the page you want to add a Carousel to in the editor.
On the left side of the editor, click the "Components" toggle, then search for "Data Collection Carousel."
Drag the Carousel into the page.
Navigate to the page you want to add a Carousel to in the editor.
On the left side of the editor, click the "Components" toggle, then search for "Product Images Carousel."
Drag the Carousel into the page.
In Replo, carousels can have two layouts:
Fixed width, where each slide takes up a certain percentage of the carousel's width, regardless of how wide the slide content is
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.
Carousel layouts can be overridden on different device sizes, so you can have a carousel be fixed width on desktop and auto width on mobile. See Responsive Design for more details about mobile overrides.
Select the Carousel you want to edit.
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.
You can now drag other components into the Carousel, and set their images, text, etc using Dynamic Data.
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.
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.
To make your carousel infinitely repeat after reaching the end, make sure to toggle ON the "Infinite Repeat Slides" toggle in the Config tab.
Replo Carousels also support two more State types:
Carousel Is At End: This state is active when the last item in the Carousel is showing.
Carousel Is At Start: This state is active when the first item in the Carousel is showing.
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.
Replo carousels follow the ARIA Carousel (Image Rotator or Slideshow) pattern correctly.
Replo carousels support correctly accessible text-direction when set to rotate vertically.
When visitors have indicated that they prefer reduced motion, the carousel slides will not animate slide transitions.
Carousels implement correct controls so that screenreaders will read the slide labels correctly and slides can be navigated with keyboards.
Replo carousels correctly use the aria-current attribute to indicate the currently selected slide and indicators.
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.
All carousel components including slides and indicators are correctly accessible using keyboard navigation.
Carousels correctly identify themselves as ARIA Landmark Regions.
The carousel Accessibility menu supports specifying a short description as text which will be read by screenreaders when they encounter carousels.
Product images carousels will correctly report their alt text if set in Shopify.
Learn more about accessibility at 📄 Accessibility in Replo
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 with Custom Scrolling Indicators
Automatically Scrolling to the Selected Variant's Featured Image
Q: Why do my slides look different on my live site than they do in the editor?
A: This difference typically occurs because carousel slides have states (often named "Active" but 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 our States article.