BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off
Guide

Loop Carousel Pro

How to set up and style the Loop Carousel widget in Elementor.

Loop Carousel shows a loop item you design in the Theme Builder for every post, page, product or custom post of a query. Show the items as a carousel with arrows and dots, or as an endless marquee row that scrolls by itself.

Part of: Bright Addons Pro. Before you start: A Loop item template made in Bright Addons Pro > Theme Builder.

Set it up

  1. Make and publish a Loop item template in Bright Addons Pro > Theme Builder.

  2. Edit a page with Elementor and add the Loop Carousel widget from the Bright Addons Loop category.

  3. Under Layout, pick the loop item in Loop Item and choose Show As: Carousel or Marquee.

  4. Under Query, choose the Source and Posts per Page.

  5. For a carousel, set Slides Visible, Arrows and Pagination in Carousel Settings. For a marquee, set Item Width, Gap and Speed.

  6. Publish the page.

Content options

Layout

Option What it does
Loop Item The Loop item template that is shown for each post.
Alternate Loop Item Shows a second loop item every Nth item, with Second Loop Item and Every Nth Item.
Query ID A name for this list that developers can use with the bapro_loop_query_{ID} filter.
Show As Carousel (slides with arrows and dots) or Marquee (endless scrolling row).
Item Width Width of each item in the marquee.
Gap Space between marquee items.
Speed (pixels per second) How fast the marquee moves.
Direction The marquee moves to the left or to the right.
Pause on Hover Stops the marquee while the mouse is over it.
Fade the Edges Fades the items at both ends of the row.

Query

Option What it does
Source Posts, pages, products, a custom post type or chosen posts by ID.
Include Terms Only posts with these terms.
Posts per Page How many items the carousel or marquee shows.
Order By Published date, last updated, title, most comments, menu order or random.
Exclude Current Post Leaves out the post being viewed.

Carousel Settings

Option What it does
Slides Visible How many slides show at once, per device.
Space Between Slides Gap between slides.
Move By Move one slide or a whole view at a time.
Autoplay Moves on by itself, with Autoplay Delay (ms) and Pause on Hover.
Loop Back to Start Goes back to the first slide after the last.
Arrows Shows previous and next arrows, with Arrows Position and icons.
Pagination Dots or other pagination under the slides.
Bright Addons Pro

Unlock this and 90+ more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $10 a year, with a 14-day money-back guarantee.

Style options

These sections are in the Style tab.

  • Arrows

    size, colors, offset and space from the slides (carousel mode).

  • Pagination

    space above, alignment, size, active width, gap, colors and radius (carousel mode).

  • Items

    background, border, radius, padding and shadow of each item, with hover colors and clipping to the rounded corners.

Tips

  • The marquee copies the items until the row is full, so even a few posts make an endless row. The copies are hidden from screen readers.

  • The marquee pauses when it is off screen, so it uses no work while nobody sees it.

  • Visitors who ask their device for less motion see the marquee as a row they scroll by hand.

  • Choose a loop item first. Until then the widget shows a short note in the editor.

Questions and answers

What is the difference between carousel and marquee?

The carousel moves slide by slide with arrows and dots. The marquee is a row that keeps moving at a steady speed.

Can I show products?

Yes. Pick Products as the Source and use product dynamic tags inside the loop item.

Can I use the same loop item in a Loop Grid?

Yes. One loop item can be used by any number of Loop Grid and Loop Carousel widgets.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides