How to Showcase Posts and Products with Elementor Loop Carousel

Sometimes a grid is too much. On a home page, you might want to show your latest articles, featured products, or recent projects without taking up half the screen. A carousel lets visitors swipe through several items in a compact space, and with Elementor Pro's Loop Carousel, every slide is generated automatically from your content.

In this tutorial you will build a Loop Carousel for blog posts, adapt it for WooCommerce products, and learn the settings that make carousels pleasant to use instead of annoying.

Loop Carousel in a Nutshell

The Loop Carousel combines two ideas:

• A Loop Item template: one card design that uses dynamic content such as the title, image, and price.
• A query: which posts, products, or custom post types to show, in what order.

Elementor repeats the card for each item and arranges them in a swipeable slider. Publish a new post, and it appears in the carousel automatically.

Step 1: Add the Widget

1. Edit the page and drag the Loop Carousel widget into a container.
2. Click Create a Template, or choose an existing Loop Item template if you already built one for a Loop Grid.

Reusing the same card design between a Loop Grid on your blog page and a Loop Carousel on your home page keeps the site consistent.

Step 2: Design the Card

For a blog post card, add:

• Featured Image with a fixed aspect ratio such as 16:9.
• Post Terms showing the category as a small label.
• Post Title linked to the post, limited to two lines with a class or a little custom CSS.
• Post Date or reading time.

Keep cards simple. In a carousel, visitors see several cards at once, and too much detail becomes noise. Save the template.

Step 3: Set the Query

• Source: Posts, Products, or your custom post type.
• Include or exclude: for example, only the "Tutorials" category, or exclude the current post when the carousel appears on single post pages.
• Order: newest first for blogs; by popularity or manually chosen items for products.
• Number of items: 6 to 10 is plenty. More rarely gets seen.

Step 4: Configure the Carousel

• Slides on display: 3 on desktop, 2 on tablet, 1 or 1.2 on mobile. Showing a slice of the next card on mobile signals that the row is swipeable.
• Slides to scroll: 1 feels natural; scrolling a full page at once can disorient.
• Gap: consistent spacing, such as 24 pixels.
• Navigation: arrows on desktop, and pagination dots or a progress bar so visitors know how many items there are.
• Loop: enable infinite loop if you have enough items.

Step 5: Be Careful with Autoplay

Autoplay is tempting, but it often frustrates visitors who are reading a card when it slides away. If you use it:

• Use a long interval, at least five seconds.
• Pause on hover and on interaction.
• Avoid autoplay for content people need to read carefully.

For most content carousels, no autoplay at all is the friendliest choice.

Variation: A Product Carousel

For WooCommerce stores, create a Loop Item for products with:

• Product image
• Product title
• Price, including sale price styling
• An "Add to cart" button
• Optionally, a sale badge

Set the query to products in a featured category, on sale, or best sellers. A "You might also like" carousel on single product pages is a classic way to increase order value.

Variation: Testimonials from a Custom Post Type

Store testimonials as a custom post type with fields for the quote, name, role, and photo. A Loop Carousel can then display them anywhere on the site, and adding a new testimonial is as easy as publishing a post.

Accessibility and Performance

• Make sure arrows and dots are keyboard accessible and clearly visible.
• Do not hide essential information inside a carousel; important content should be visible without interaction.
• Use appropriately sized images for cards, not full-resolution originals.
• Avoid placing a carousel as the very first element of the page, where it can slow down the main content.

Common Problems

• Cards have uneven heights. Use a fixed image ratio and limit title lines.
• Empty carousel. Check the query: the category, post type, or exclusions may filter out everything.
• Carousel breaks on mobile. Reduce slides on display and check the gap setting for small screens.

Wrapping Up

The Loop Carousel turns dynamic content into a compact, swipeable showcase that updates itself. Design a clean card, write a focused query, use sensible slide counts per device, and go easy on autoplay. The result is a section that highlights your best content without overwhelming the page.