The Repeater Carousel widget for Elementor is a powerful tool designed to transform your website’s dynamic content into engaging, interactive carousels. Seamlessly integrating with popular plugins like ACF, JetEngine, Meta Box, and Toolset, this widget allows you to display repeater fields in a visually appealing carousel format. Whether you’re showcasing blog posts, products, testimonials, or any custom fields, the Repeater Carousel offers extensive customization options to enhance user experience and keep your audience engaged.
Let’s look at each of the options in the Repeater Carousel widget for Elementor below.
Add a Repeater Carousel Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Repeater Carousel”
- Hover over the widget in the search results and click install
- Add the “Repeater Carousel” widget to any Elementor Page
Repeater Settings
Repeater Source
You can select the repeater source from below options.
- Meta Fields: Use meta fields from the current post or a custom post type as the source.
- JSON / CSV: Import data from uploaded JSON or CSV files.
- Google Sheets: Connects to a Google Sheets file as the data source.
Meta Field Name
Specify the name of the meta field that contains the repeater data.
Meta Field Location
- Current Post: Use this option to fetch meta field data from the currently displayed post.
- Parent Post: Select this option to fetch meta field data from the parent post of the current post.
- Select Post: Choose this option to manually select a specific post as the source of meta field data.
- Current Term: Use this option to fetch meta field data from the currently displayed taxonomy term.
- Parent Term: Select this option to fetch meta field data from the parent taxonomy term of the current term.
- Current User: Use this option to fetch meta field data from the currently logged-in user.
Show Debug Data
Toggle this option to display raw data for testing and debugging purposes.
Show Debug Meta
Toggle this option to display meta information for debugging purposes.
Title Field Name
Type the title field name.
Content Field Name
Set the content field name.
Image Field Name
Specify the field name for image.
Button Link Field Name
Specify the field name for the button link URL.
General Settings
Autoplay
Enable or disable automatic sliding of carousel items.
Autoplay Interval
Define the time (in milliseconds) between each slide transition when autoplay is enabled.
Autoplay Hover Pause
Enable to pause autoplay when hovering over the carousel.
Loop
Enable to make the carousel loop infinitely.
Number of Items
Set the number of items visible at a time in the carousel.
Slides to Scroll
Define the number of items that move per scroll action.
Margin Between Items
Set the spacing (in pixels) between carousel items.
Transition Speed
Define the duration (in milliseconds) of the transition effect.
Transition Easing
Enable to apply easing effects to transitions.
Stage Padding Type
Select padding style for carousel stage.
- None
- Both
- Left
- Right
Center
Enable to align the active item at the center of the carousel.
RTL
Enable for websites using right-to-left languages like Arabic, Hebrew, or Persian.
Set Active Mode on Mobile
Enable to ensure the active slide remains visually distinct on mobile devices, improving focus and usability.
Change on Click
Enable to allow slides to change when an item is clicked.
Random Order
Enable to display carousel items in a random sequence.
Mouse Drag
Enable to allow users to drag the carousel using a mouse.
Touch Drag
Turn on to allow touch-based dragging on mobile devices.
Drag End Speed
Define the time (in milliseconds) it takes for the drag animation to stop.
Mouse Wheel Control
Enable to allow users to scroll through the carousel using the mouse wheel.
Scroll to Head
Enable to automatically scroll to the carousel if it's not visible when an item changes.
Open Link in New Tab
Enable to open linked carousel items in a new browser tab.
Layout Setting
Show Title
Show or hide the title above the carousel items.
Title Tag
Set the HTML tag for the title element.
- div
- h2
- h3
- h4
- h5
- h6
Show Image
Enable or disable displaying an image.
Fallback Image
Set a default image to be used when no image is provided for a carousel item.
Fallback Image Size
Define the size of the fallback image.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- Woocommerce Thumbnail (300x300)
- Woocommerce Single (max width 600)
- Woocommerce Gallery Thumbnail (100x100)
Show Content
Show or hide the content.
Show Button
Enable or disable displaying a button.
Button Text
Define the text displayed on the button.
Show Button Icon
Enable to display an icon alongside the button text.
Button Icon
Select an icon to be used within the button.
Show Arrows
Enable to display navigation arrows for manually scrolling through the carousel.
Show Dots Navigation
Enable to display navigation dots for users to jump between slides.
Connected Widgets Settings
Connected Widgets Settings let you create dynamic, interactive layouts with advanced features. Use remote control widgets for creative layouts or sync item-based widgets together for smooth integration.
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Animations Settings
Button Hover Animation
Set the button hover animation:
- Grow
- Shrink
- Pulse
- Pulse Grow
- Pulse Shrink
- Push
- Pop
- Bounce In
- Bounce Out
- Rotate
- Grow Rotate
- Float
- Sink
- Bob
- Hang
- Skew
- Skew Forward
- Skew Backward
- Wobble Vertical
- Wobble Horizontal
- Wobble To Bottom Right
- Wobble To Top Right
- Wobble Top
- Wobble Bottom
- Wobble Skew
- Buzz
- Buzz Out
Arrows Settings
Left Arrow
Choose icon for left navigation arrows.
Right Arrow
Choose icon for right navigation arrows.
Hide Arrow Condition
Hide the navigation arrows if products are less than specific number.
Repeater Carousel Widget Styling
You can customize every aspect of the widget’s design, including colors, text, icons, fonts, and layout, to perfectly match your website’s style.
Item Styling
Set the item padding, margin, radius, background, border, and shadow.
Image Styling
You can set the image height, radius, padding, border, and positioning.
Content Styling
Set the content alignment, padding, margin, background, and border.
Title Styling
You can set the title color, typography, and spacing.
Text Styling
Set the text color, typography, and spacing.
Button Styling
Here, you can set the typography, width, alignment, spacing, padding, radius, and border of button.
Button Icon Styling
Set the icon size, gap, and color.
Nav Arrows Styling
You can set the nav arrows spacing, positioning, radius, background, icon size and color.
Nav Dots Styling
Set the nav dots size, color, spacing, and alignment.
Repeater Carousel Design Examples For Elementor
Here are some live use cases for the Repeater Carousel Widget.
Repeater accordion with nutrition information.
Team member details as repeater carousel.
We hope this guide helped you explore the powerful features of the Repeater Carousel Widget. With its dynamic display options and flexible customization, you can create captivating content carousels effortlessly. If you have any questions or need further assistance, feel free to reach out.
