Sky Addons for Elementor

⌘K
  2. Home
  4. Sky Addons for Elementor
  6. Carousel & Slider
  8. Mate Carousel

Mate Carousel

How to use Mate Carousel Widget of Sky Addons for Elementor

Mate Carousel is a flexible blog post carousel widget for Elementor that slides your latest posts across 1 to 6 columns. Posts are pulled automatically through the built-in Query builder, displayed with image, category, title, excerpt, author, and date — and posts with a video link get a play button that opens a video lightbox. With two content layouts, Slide and Coverflow effects, and full navigation and pagination options, the Mate Carousel widget for Elementor is a complete Elementor post carousel for blogs, magazines, and news sections. This documentation will guide you through the process of using the Mate Carousel Widget to showcase your posts on your website.

Features:

  1. Responsive Columns: Show 1 to 6 posts per view, set per device.
  2. Two Content Layouts: Switch between Layout 1 and Layout 2 to change how the post card is arranged.
  3. Query Builder: Filter by post type, terms, authors, and order, with a posts-per-page limit.
  4. Post Elements On/Off: Toggle title, image, category, author, excerpt, and date individually.
  5. Video Lightbox: Posts with a video link show a play button that opens the video in a lightbox.
  6. Carousel Engine: Autoplay, loop, slide speed, pause on hover, slides per group, centered slides, grab cursor, and free mode.
  7. Navigation & Pagination: Custom prev/next icons plus bullets, fraction, or progress bar pagination.

Insert Mate Carousel Widget

  1. Open Elementor Editor. In the Elementor panel, search for “Mate Carousel” under Sky Addons.
  2. Drag and Drop the Widget to the desired location on your page / editor.

Configure Layout

  1. Columns: Choose 1–6 columns, with separate defaults for desktop, tablet, and mobile.
  2. Select Layout: Pick Layout 1 or Layout 2 for the post card arrangement.
  3. Image Size: Choose the thumbnail size used for featured images.
  4. Alignment: Align card content left, center, right, or justified — responsive per device.

Build the Query

The Query section decides which posts appear in the carousel. Select the source post type, include or exclude terms and authors, set the order, and limit results with Posts Per Page. The carousel updates automatically as you publish new content.

Configure Additional Options

  1. Show Title: Toggle post titles and choose the Title HTML Tag.
  2. Show Image: Toggle the featured image.
  3. Show Category: Toggle the post category badge.
  4. Show Author: Toggle the author name and avatar.
  5. Show Text: Toggle the excerpt, cap it with Text Limit (0 shows the full text), and clean it with Strip ShortCode.
  6. Show Date: Toggle the post date with the standard date format options.
  7. Show Video: Show a play button on posts that have a video link, enabling the video lightbox and its Video Settings section (autoplay, mute, aspect ratio, lightbox animation, or open as file).

Carousel Settings

The Carousel Settings section controls how the carousel moves:

  1. Item Gap: Space between slides, responsive per device.
  2. Transition Effect: Slide or Coverflow — Coverflow adds a popover with Depth, Modifier, Rotate, Stretch, and optional Slide Shadows.
  3. Autoplay: Advance automatically with Autoplay Speed (ms) (default 5000).
  4. Loop: Restart from the first slide after the last one.
  5. Slide Speed (ms): Duration of the slide transition animation.
  6. Pause On Hover: Pause autoplay while the cursor is over the carousel.
  7. Slides Per Group: Move 1–6 slides at a time, per device.
  8. Observer: Enable when the carousel sits inside a hidden element (tabs, accordions) so it initializes correctly.
  9. Centered Slides, Grab Cursor, Free Mode: Center the active slide, show a grab cursor, and allow momentum-style free scrolling.

Navigation

Enable Show Navigation to add prev/next arrows, and replace the default arrows with any icons via the Prev Icon and Next Icon pickers. The arrows’ size, colors, background, border, and position are styleable in the Navigation style section.

Pagination

Choose a pagination Type — None, Bullets (with optional Dynamic Bullets), Fraction, or Progress Bar — and set its Alignment. Colors, size, and spacing live in the Pagination style section.

Style Your Carousel

Customize every element of the post cards to match your design aesthetics — colors, typography, spacing, and effects for a carousel that fits your brand.

  1. Mate Carousel:
    Item padding, border, border radius, and Normal/Hover tabs with background, box shadow, and hover border color.
  2. Image:
    Width, height, padding, border, border radius, and CSS filters for the featured image.
  3. Title:
    Spacing plus the full title styling — color with hover, typography, and text shadow.
  4. Text:
    Color, typography, and spacing for the excerpt.
  5. Category:
    Spacing, space between badges, and the full category badge styling.
  6. Meta:
    Spacing and space-between for the author/date row.
  7. Author:
    Name color (normal and hover), typography, text shadow, avatar size/border/radius/shadow/filters, and date color and typography.
  8. Play Button:
    Full styling for the video play button.
  9. Navigation & Pagination:
    Arrow and bullet/fraction/progress bar styling — colors, sizes, backgrounds, and positions.

Save and Preview

  1. Once you’ve customized and styled your carousel, click “Publish” or “Update” to save your changes.
  2. Preview the page to ensure the widget looks and functions as desired.

Best Practices

  1. Consistency: Maintain a consistent style with the rest of your website for a cohesive look.
  2. Use Featured Images: Give every queried post a featured image so cards stay visually even.
  3. Accessibility: Keep autoplay speed comfortable and enable Pause On Hover so visitors can read each card.
  4. Testing: Check column counts and slide behavior across devices and screen sizes for a responsive design.

Troubleshooting

  1. No Posts Showing: Verify the Query section returns published posts (check post type, terms, and Posts Per Page).
  2. Carousel Not Sliding Inside Tabs/Popups: Enable Observer in Carousel Settings when the widget sits in an initially hidden element.
  3. Play Button Not Appearing: Show Video must be on and the post needs a video link saved in its Sky Addons video link field.

Frequently Asked Questions

How do I autoplay the Mate Carousel in Elementor?

Open Carousel Settings, enable Autoplay, and set the Autoplay Speed (ms) delay (default 5000). Add Pause On Hover so the carousel stops while visitors read a card.

How many posts can the Mate Carousel show at once?

Up to 6 per view. Set Columns in the Layout section separately for desktop, tablet, and mobile, and use Slides Per Group to control how many slides move per swipe.

How do I control which posts appear in the carousel?

Use the Query builder: choose the post type, include or exclude categories/terms and authors, set the order, and limit the total with Posts Per Page.

How do I add arrows and dots to the Mate Carousel?

Enable Show Navigation for prev/next arrows (with custom icons) and pick a Pagination Type — Bullets, Fraction, or Progress Bar. Both have dedicated style sections for colors, sizes, and position.

Can the Mate Carousel play videos from posts?

Yes. Turn on Show Video, and posts with a video link in their Sky Addons video link field display a play button that opens the video in a lightbox, configurable in Video Settings.

Related Documentation

Conclusion

The Mate Carousel Widget by Sky Addons for Elementor turns your blog into a sleek sliding showcase. Utilize its query builder, video lightbox, and carousel engine to keep visitors exploring your content. For further assistance, consult the Sky Addons support team or community forums. Enjoy presenting your posts!

How can we help?