The Loop Carousel

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

The Style tab

The Advanced tab

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:

When users click this icon, the carousel will advance to the next item. You can:

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:

  1. Dots, with each dot representing a page.
  2. Fractions - using numbers to show how far they are in the loop.
  3. 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:

  1. Dots - with each dot representing a page.
  2. Fractions - using numbers to show how far they are in the loop.
  3. 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. 

Learn more about the different types of measurement units.

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.

Learn more about the different types of measurement units.

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.

Share it on social networks

Was this article helpful?

Related content

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page