How to use Loop Carousel Widget of Sky Addons for Elementor

The Sky Addons Loop Carousel widget combines Elementor’s Loop Template system with the Swiper carousel engine to display any WordPress post type — posts, pages, custom post types, WooCommerce products — as a smooth, touch-enabled slider. You design the card once as an Elementor Loop Template, point the widget at it, and the widget handles the query, the responsive slide count, autoplay, navigation, and pagination. This documentation will guide you through the process of using the Loop Carousel Widget to create a dynamic, fully designed post carousel on your website.

Features:

1. Loop Template Integration: Pick any Elementor Loop Template from a searchable dropdown — the widget renders your custom card design for every matched post.
2. Powerful Query Builder: Filter posts by post type, taxonomy, author, date range, custom fields, and manual include/exclude — the same Group Control Query used across all Sky Addons query widgets.
3. 1–6 Responsive Columns: Set slides-per-view independently for desktop, tablet, and mobile (Swiper’s slidesPerView).
4. Row and Column Gap: Control spacing between slides on both axes with responsive slider controls.
5. Swiper Carousel Settings: Autoplay, loop, speed, and space-between — all configurable in the Carousel Settings section.
6. Navigation Arrows: Enable prev/next arrow buttons with full style control over icon, size, color, background, and offset.
7. Pagination: Dot or fraction pagination with color and spacing customization.
8. No Hard-Coded Card Markup: Because the card design lives in your Loop Template, you can change the entire look of every slide without touching the widget settings.

Before You Start — Create a Loop Template

The Loop Carousel requires an Elementor Loop Template to define how each post card looks. If you do not have one yet, create it first.

1. In your WordPress dashboard, go to Templates → Theme Builder → Loop Item (or Elementor → Templates → Loop depending on your Elementor version).
2. Click Add New, choose Loop Item as the template type, and design your card using Elementor’s dynamic tags — Post Title, Featured Image, Excerpt, Post URL, and any custom field you need.
3. Publish the template. Its name will appear in the Loop Carousel widget’s template picker.

Insert Loop Carousel Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Loop Carousel in the widget panel and drag it onto the canvas.

Configure Layout

The Layout section sets the template and column/gap structure of the carousel.

1. Select Template: Type and select your Elementor Loop Template from the searchable dropdown. The carousel renders nothing in the editor until a template is chosen.
2. Columns: Select 1–6 columns per breakpoint (desktop default: 3, tablet: 2, mobile: 1). This sets Swiper’s slidesPerView.
3. Row Gap: Vertical space between slides when multiple rows are visible (0–50 px or em).
4. Column Gap: Horizontal space between adjacent slides (0–50 px or em).

Configure Query

The Query section controls which posts appear in the carousel using the Sky Addons Group Control Query Builder.

1. Post Type: Choose any registered post type (Posts, Pages, Products, or custom types).
2. Posts Per Page: How many posts to load into the carousel (default: 6).
3. Order By / Order: Sort by date, title, menu order, modified date, random, or comment count. Choose Ascending or Descending.
4. Filter by Taxonomy: Include or exclude specific categories, tags, or custom taxonomy terms.
5. Include / Exclude: Manually include or exclude specific post IDs.
6. Author: Limit results to posts by specific authors.

Configure Carousel Settings

The Carousel Settings section configures Swiper’s behavior.

1. Autoplay: Toggle automatic sliding and set the delay interval.
2. Loop: Enable infinite looping from the last slide back to the first.
3. Speed: Slide transition duration in milliseconds.
4. Space Between: Gap between slides in pixels (independent from the Column Gap layout control).

Configure Navigation and Pagination

1. Navigation: Enable previous/next arrows and choose whether they are always visible or appear on hover only.
2. Pagination: Enable dot or fraction pagination and choose the pagination type.

Style Your Loop Carousel

Use the Style tab to customize the navigation arrows and pagination indicators. The post card appearance is fully controlled by your Loop Template design.

1. Navigation:
   Arrow size, background (Normal / Hover), color, border, border radius, box shadow, and horizontal/vertical offset from the carousel edges.
2. Pagination:
   Dot size, inactive color, active color, spacing between dots, and margin from the carousel bottom.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your Loop Carousel widget in action.

Best Practices

1. Design your Loop Template to have a fixed aspect ratio for the featured image — this ensures all slides are the same height and the carousel looks uniform across all posts.
2. Keep the Post Per Page count reasonable (6–12). Loading 50 heavy Loop Templates at once can slow the page; use pagination in the Loop Grid if you need to show many posts.
3. Use Space Between in Carousel Settings rather than padding on the Loop Template itself — this keeps the gap consistent and prevents odd behavior when the carousel loops.
4. Test on mobile after setting columns: 1 column on mobile is almost always the right choice to give each card full-width visibility.

Troubleshooting

1. The carousel shows “Please select a template” in the editor: No Loop Template has been selected. Open the Layout section and choose a template from the Select Template dropdown. If no templates appear, make sure you have at least one published Elementor Loop Item template.
2. Carousel does not slide and shows all posts in a column: Swiper failed to initialize. Check the browser console for JavaScript errors. Verify that no other plugin is loading a conflicting version of Swiper and that the swiper script is enqueued.
3. “posts not found” appears on the frontend: The Query settings match no posts. Check the post type, taxonomy filters, and include/exclude IDs. Temporarily removing all filters and setting a high Posts Per Page will confirm whether posts exist.

Frequently Asked Questions

What types of content can I display in the Loop Carousel?

Any registered WordPress post type — blog posts, pages, WooCommerce products, portfolio items, team members, testimonials, or any custom post type your theme or plugin registers.

Can I use a different Loop Template per slide?

The Loop Carousel uses a single template for all slides. If you need alternating card designs, use the Loop Grid widget, which supports alternate templates at defined positions.

Is the Loop Carousel compatible with WooCommerce products?

Yes. Set the post type to product in the Query section and design a Loop Template using Elementor’s WooCommerce dynamic tags (Product Title, Price, Add to Cart, etc.).

How does this differ from the Loop Grid widget?

The Loop Grid displays posts in a static CSS grid and supports pagination and alternate templates at specific positions. The Loop Carousel wraps the same query result in a Swiper slider for horizontal swiping — there is no pagination (the slider loops instead), and alternate templates are not supported.

Do I need Elementor Pro to use Loop Templates?

Yes. Elementor’s Loop Item template type is a feature of Elementor Pro. Sky Addons Pro requires Elementor and is compatible with Elementor Pro’s Loop Builder.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Loop Carousel widget:

• Loop Grid: The static-grid version with alternate template support, pagination, and up to 12 columns.
• Instagram Feed Carousel: A Swiper carousel pre-wired to Instagram posts — no Loop Template needed.
• Particles: Add an animated particle background to the section that contains your Loop Carousel for a dynamic visual effect.

Conclusion

The Loop Carousel widget is the fastest way to turn any WordPress post type into a touch-friendly, Swiper-powered slider — with your own Elementor Loop Template controlling every pixel of the card design. If you have any questions or need help, visit the Sky Addons support center.