Creating a Loop Carousel in Elementor is an effective way to present content in a continuous, engaging flow that encourages users to keep scrolling. Unlike traditional sliders, a loop carousel delivers an endless experience that works perfectly for showcasing posts, products, or any custom content. In this tutorial, you’ll learn how to build a loop carousel, customize its layout, and use remote control widgets to create a dynamic and visually polished design.
Step #1: Install and activate Unlimited Elements
Before getting started, you will need to purchase Unlimited Elements Pro from the link below to access the Loop Carousel widget.
Then follow these steps:
Step #2: Create an Elementor Template
It requires Elementor Pro installed and activated on your WordPress website.
Go to Templates -> Theme Builder -> Single Post -> Click the “Add New” button on the top
Name your template
Give your template a name and click the “CREATE TEMPLATE” button
Start your own design
Close the templates library dialog to start your own design.
Choose a demo post
Choose a demo post to build your carousel.
Click on the settings icon on the bottom -> Click “Preview Settings” -> Choose a content type and post
Don’t forget to click the “APPLY & PREVIEW” button when you are done.
Design your carousel item
Drag & drop widgets to design your carousel item using the Elementor editor.
Once you are done click the “PUBLISH” or “UPDATE” button & exit to the WP dashboard.
You can use the following dynamic single post widgets to create your dynamic template.
- Post Title
- Post Excerpt
- Post Content
- Featured Image
- Author Box
- Post Comments
- Post Info
You can use advance custom field(ACF) to showcase dynamic contents.
Step #3: Adding the Loop Carousel in Elementor Website
To create a dynamic carousel in Elementor, install the Loop Carousel widget from the Unlimited Elements Widget library.
Step #4: Add the Loop Carousel widget to your Elementor page
Now, in the Elementor editor, Find the Loop Carousel widget and drag it to the desired part of your page.
General Settings
Items Post Query Settings
Posts Source
Choose any of the below options for your post source.
- Current Query Post
- Custom Posts
- Related Posts
- Manual Selection
Post Types
Choose the type of post you want to display.
Include By
Include the posts from different options given below
- Include Sticky Posts
- Get Only Sticky Posts
- Author
- Date
- Post Parent
- Post Meta
- Most Viewed
- ID's from PHP function
- ID's from Post Meta
- ID's from Dynamic Field
Include By Terms
Choose specific posts that you would like to include from your selection by adding rules.
- Include By Terms Relation
- Include Terms Children
Exclude By
Choose specific posts that you would like to exclude from your selection by adding rules.
- Terms
- Current Posts
- Author
- Post Without Featured Image
- Posts with current category
- Posts with current tags
- Offset
- Avoid Duplicates
- ID's from Dynamic Field
Carousel Settings
Number of Items
Set the number of items to show in carousel at a time.
Autoplay
Turn on/off the autoplay option.
Autoplay Hover Pause
Autoplay will pause on hover.
Margin Between Items
Set the margin between carousel items.
Show Arrows
Show/Hide the navigation arrows.
Show Dots
Show/Hide the pagination dots.
Autoplay Timeout
Set the time between two autoplays.
Transition Speed
Set the transition time in autoplay.
Loop
Turn on or off the loop option.
Navigation Rewind
Enable or disable the navigation rewind option.
Set Active Mode on Mobile
Turn on/off the active mode on mobile.
Change On Click
Change the clicked item on item click.
Center
Enable the "Center" option if you want the active slide to be centered.
RTL
Enable the "RTL" (Right-to-Left) option if your layout requires it.
Mouse Drag
Enable this option to allow users to drag the carousel using a mouse.
Touch Drag
Enable this option to allow touch-based dragging on touchscreen devices.
Scroll To Head
Enable or disable the scroll to head option.
Show Preload Height
Show/Hide the preload height.
Preload Height (px)
Adjust the preload height in pixels.
Equal Item Height
Enable this option to make all items the same height.
Autoheight
Auto adjust height according to the highest visible slide.
Stage Padding Type
Select the stage padding type:
- None
- Both
- Left
- Right
Arrows Settings
Connected Widgets Settings
Enable Remote Connection
Widget Name for Connection
Choose this to "Auto Detectable", so it will automatically detect the remote widgets.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Posts Pagination and Filtering Options
Add the AJAX-based faceted filter system, seamlessly empowering you to craft diverse layouts with ease. Take control by applying multiple filters, ensuring a super-fast and dynamic filtering experience tailored to your website needs.
Pagination
Select the pagination to show Numbers, Using Pagination Widget or None.
Enable Post Filtering
When turned on, you can use all the post filters widgets like tabs filter, load more etc with this widget.
Filters Behaviour
Select the filter behaviour:
- Ajax
- Ajax and URL Change
- Ajax, URL Change and Back Button
Group
Select the group, and allow filtering group of widgets at once.
Disable Third Party Modifications
Disable other themes or plugins hooks and their code so they will not influence on the query.
Step #5: Add the Remote Arrows widget
Optionally, we can add remote control widgets to make unique layouts, Add the Remote Arrows Widget to the page, Set it to “Auto Detectable” and it will automatically connect with the Loop Carousel, we can style the remote arrows accordingly to match our website design.
Add the Remote Counter widget
Similarly, let’s add the Remote Counter Widget to the page, Set it to “Auto Detectable” and it will automatically connect with the Loop Carousel, we can also style the remote counter accordingly to match our website design.
Add the Remote Bullets widget
Finally, to complete the design, let’s add the Remote Bullets Widget to the page, Set it to “Auto Detectable” and it will automatically connect with the Loop Carousel, we can also style the remote counter accordingly to match our website design.
Wrapping it Up!
A loop carousel adds movement and interactivity to your website while keeping content front and center. By creating a Loop Carousel in Elementor, you gain full control over layout, behavior, and design, allowing you to craft sections that feel modern and engaging. Whether you’re highlighting blog posts, products, or featured content, this approach helps your website stand out with precision, flexibility, and a seamless user experience.