What is a Loop Carousel?
A Loop Carousel is essentially a Loop Grip where the individual entries scroll from side-to-side rather than up and down. Learn about Loop Grids.
What’s different about the Loop Carousel?
As mentioned above, a Loop Carousel moves from side-to-to-side, therefore a number of the controls are different.
The Content tab - Layout
Layout controls how the carousel will appear to your visitors.
Use the dropdown to select a template you designed or a premade template from the template library.
The number of items in the loop.
The number of items a visitor will see on the page.
This determines how many slides will advance when the use clicks the next and previous arrows.
Keeping all items an equal height helps preserve the symmetry of your loop.
The Content tab - Query
Query controls which items will appear in your carousel. See our article on constructing a query for more details.
Loop items are not limited to Posts. Use the dropdown to populate your loop with:
- Posts
- Pages
- Landing Pages
- Manual Selection
- Current Query
- Related (items that fall under the same category)
See our article on constructing a query for more details.
You may want limit your loop to more recent items. Use the dropdown to filter by:
- Past Day
- Past Week
- Past Month
- Past Quarter
- Past Year
- A custom date range
Items placed earlier in the loop are more likely to attract attention. Use the dropdown to order the items by:
- Date
- Title
- Menu Order
- Last Modified
- Number of comments
- Random
Further customize the order in which visitors see your loop items by organizing them in descending or ascending order.
The Content tab - Settings
Use this toggle to determine if items will move automatically or only when the visitor clicks the navigation icon.
If you turn autoplay off, you'll have options to:
- Have the loop scroll infinitely.
- Determine the transition time between items when scrolling
- Set items to scroll from left-to-right or from right-to-left (this basically changes which navigation is previous and which one is next).
You may want limit your loop to more recent items. Use the dropdown to filter by:
- Past Day
- Past Week
- Past Month
- Past Quarter
- Past Year
- A custom date range
Pause on Hover lets your users pause the loop to select items that interest them.
Pause on interaction lets your users pause the loop to select items that interest them.
Keep your loop going with infinite scroll.
The time it takes to move from one item to the next - measured in milliseconds.
Sets the direction items will move in.
The Content tab - Navigation
Navigation determines how visitors can scroll through the carousel.
Choose whether or not to display navigation arrows. Hiding these arrows will make it more difficult for visitors to page through your loop.
When users click this icon, the carousel will advance to the next item. You can:
- Choose not to have an icon.
- Upload your own svg file to use as an icon.
- Choose and icon from the icon library.
When users click this icon, the carousel will advance to the next item. You can:
- Choose not to have an icon.
- Upload your own svg file to use as an icon.
- Choose and icon from the icon library.
The Content tab - Pagination
Pagination controls how visitors will see where they are within the loop.
Depending on how many items you choose to display on screen, the items in your loop will be divided into "pages."
You can choose to help your visitors understand where they are in your loop, by displaying pagination in the form of:
- Dots, with each dot representing a page.
- Fractions - using numbers to show how far they are in the loop.
- Progress - a bar that shows how they are in the loop.
The Style tab - Layout
Depending on how many items you choose to display on screen, the items in your loop will be divided into "pages."
You can choose to help your visitors understand where they are in your loop, by displaying pagination in the form of:
- Dots - with each dot representing a page.
- Fractions - using numbers to show how far they are in the loop.
- Progress - a bar that shows how they are in the loop.
The Style tab - Navigation
Controls the look of the navigation icons. This will not appear if the navigation arrows are turned off in the Content tab.
Make your navigation icons stand out by increasing their size or emphasize your media by making them smaller.
How your navigation icons will appear by default.
How your navigation icons will appear when visitors mouseover them.
Change the color of your navigation icons.
To choose a color, either use the color picker or a global color.
Choosing Inside will make the navigation icons part of the loop elements, choosing Outside will place them outside the elements.
The Style tab - Pagination
Controls the look of the pagination symbols. This will only appear if pagination is turned on in the Content tab. There are three of these menus depending on which pagination style you choose.
Control the size of the pagination dots.
The size of the dots by default.
The size of the pagination dots when visitors mouseover them.
Change the color of your pagination icons.
To choose a color, either use the color picker or a global color.
Choosing Inside will make the pagination icons part of the loop carousel, choosing Outside will place them outside the carousel.
If you choose Outside, you'll be able to edit the amount of space between the carousel and the dots.
Learn more about typography.
To choose a color, either use the color picker or a global color.
Choosing Inside will make the pagination icons part of the loop carousel, choosing Outside will place them outside the carousel.
If you choose Outside, you'll be able to edit the amount of space between the carousel and the dots.
Control the size of the progress bar.
How the progress bar will appear by default.
How the progress bar will appear when visitors mouseover it.
To choose a color, either use the color picker or a global color.
Next Steps
To get the most out of Elementor, check out the Elementor Academy and our YouTube channel for helpful learning resources. If you come across any issues or need help, please contact our Support Center.