Sky Addons for Elementor

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

Mate Slider

How to use Mate Slider Widget of Sky Addons for Elementor

Mate Slider is an elegant blog post slider widget for Elementor that presents one post at a time using two synced sliders — the featured image glides on one side while the post content (category, title, excerpt, author, date) slides in with a subtle parallax effect on the other. Posts come straight from the built-in Query builder, and posts with a video link can play in a lightbox. The Mate Slider widget for Elementor is perfect for hero sections and featured-post areas where each article deserves the full stage. This documentation will guide you through the process of using the Mate Slider Widget to spotlight your posts on your website.

Features:

  1. Dual Synced Sliders: Image and content slide in sync, with a parallax motion on the content side.
  2. Query Builder: Choose post types, terms, authors, order, and posts per page — the slider fills itself.
  3. Post Elements On/Off: Toggle title, category, author, excerpt, and date individually.
  4. Video Lightbox: Posts with a video link show a play button that opens the video in a lightbox.
  5. Slider Controls: Autoplay, loop, slide speed, pause on hover, and an Observer mode for hidden containers.
  6. Custom Navigation: Prev/next arrows with custom icons, optionally always visible.
  7. Full Styling: Style sections for image, title, text, category, meta, author, navigation, and play button.

Insert Mate Slider Widget

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

Configure Layout

  1. Column Gap: Space between the image slider and the content slider, responsive per device.
  2. Image Size: Choose the thumbnail size used for featured images.
  3. Alignment: Align the content left, center, right, or justified.

Build the Query

The Query section decides which posts appear in the slider. Select the source post type, include or exclude terms and authors, set the order, and limit results with Posts Per Page. Each matching post becomes one image slide paired with one content slide.

Configure Additional Options

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

Configure Slider Settings

The Settings section controls the slider’s motion:

  1. Autoplay: Advance slides automatically with Autoplay Speed (ms) (default 5000).
  2. Loop: Restart from the first post after the last one.
  3. Slide Speed (ms): Duration of the slide transition animation (default 1500).
  4. Pause On Hover: Pause autoplay while the cursor is over the slider.
  5. Observer: Enable when the slider sits inside a hidden element (tabs, popups) so it initializes correctly.
  6. Show Navigation / Show Navigation always: Toggle the prev/next arrows and choose whether they stay permanently visible instead of appearing on hover.

Navigation

When Show Navigation is on, the Navigation section lets you replace the default arrows with any icons via the Prev Icon and Next Icon pickers. Arrow size, colors, background, and position are styleable in the Navigation style section. The Mate Slider uses arrows only — there is no bullet pagination, keeping the design minimal.

Style Your Slider

Fine-tune both sides of the slider to match your design aesthetics — image treatment on one side, typography and meta on the other.

  1. Image:
    Width, height, padding, border, border radius, and CSS filters for the featured image.
  2. Title:
    Spacing plus the full title styling — color with hover, typography, and text shadow.
  3. Text:
    Color, typography, and spacing for the excerpt.
  4. Category:
    Spacing, space between badges, and the full category badge styling.
  5. Meta:
    Spacing and space-between for the author/date row.
  6. Author:
    Name color (normal and hover), typography, text shadow, avatar size/border/radius/shadow/filters, and date color and typography.
  7. Navigation:
    Arrow icon size, colors, background, border, and offset for normal and hover states.
  8. Play Button:
    Full styling for the video play button.

Save and Preview

  1. Once you’ve customized and styled your slider, 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 High-Quality Featured Images: One image fills half the slider, so sharp, well-cropped images matter.
  3. Accessibility: Keep the autoplay delay generous and enable Pause On Hover so visitors can read each post.
  4. Testing: Check the synced sliding across different 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. Slider Not Initializing Inside Tabs/Popups: Enable Observer in the Settings section when the widget sits in an initially hidden element.
  3. Arrows Not Visible: The arrows show on hover by default — enable Show Navigation always to keep them visible at all times.

Frequently Asked Questions

How do I autoplay the Mate Slider in Elementor?

Enable Autoplay in the Settings section and set the Autoplay Speed (ms) delay (default 5000). Add Pause On Hover so the slider waits while visitors read.

What is the difference between Mate Slider and Mate Carousel?

Mate Slider shows one post at a time with the image and content in two synced sliders and a parallax effect — built for hero areas. Mate Carousel slides multiple post cards (up to 6 columns) like a classic carousel.

How do I change the navigation arrows on the Mate Slider?

With Show Navigation on, open the Navigation section and pick any icons for Prev Icon and Next Icon. Enable Show Navigation always if you want the arrows permanently visible rather than on hover.

Can the Mate Slider play videos?

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

Why doesn’t the Mate Slider work inside a tab or popup?

Sliders inside initially hidden elements can’t measure their size on load. Enable Observer in the Settings section and the slider re-initializes when it becomes visible.

Related Documentation

Conclusion

The Mate Slider Widget by Sky Addons for Elementor gives each post a cinematic, full-attention slide. Utilize its synced parallax sliders and query builder to spotlight your best content. For further assistance, consult the Sky Addons support team or community forums. Enjoy showcasing your posts!

How can we help?