How to use Luster Carousel Widget of Sky Addons for Elementor
Luster Carousel is a stylish Elementor post carousel widget that displays your blog posts, news, or any post type in a sleek sliding layout. Powered by a flexible Query builder, it pulls posts automatically and presents each one with a featured image, category badges, author, date, and an optional excerpt — all wrapped in a smooth Swiper-based carousel with autoplay, loop, navigation arrows, and pagination. The Luster Carousel widget for Elementor also detects video posts and can open them in a lightbox with a play button overlay. This documentation will guide you through the process of using the Luster Carousel Widget to showcase your latest content in motion.
Features:
- Powerful Query Builder: Pull posts from any post type and filter by terms, authors, include/exclude rules, date, order, and offset.
- Responsive Columns: Show 1 to 6 slides per view with separate defaults for desktop, tablet, and mobile.
- Rich Post Elements: Toggle the title, category, author, date, and excerpt independently, with a configurable text limit.
- Video Support: Video posts get a play button and can open in a lightbox with aspect ratio, autoplay, and mute options.
- Full Carousel Control: Autoplay, loop, slide speed, pause on hover, centered slides, free mode, grab cursor, and transition effects including coverflow.
- Navigation & Pagination: Prev/next arrows with custom icons plus bullets, fraction, or progress bar pagination.
- Hover Image Effect: Featured images zoom subtly on hover with an optional gradient overlay for readable text.
- Title Accent Bar: A decorative bar under the post title with adjustable size and color or gradient background.
Insert Luster Carousel Widget
- Open Elementor Editor. In the Elementor panel, search for “Luster Carousel” under Sky Addons.
- Drag and Drop the Widget to the desired location on your page / editor.
Configure Layout
Start in the Layout section to define the basic shape of your carousel:
- Columns: Choose how many slides are visible at once (1–6). Set different values for desktop, tablet, and mobile.
- Image Size: Pick the thumbnail resolution (Large by default) for the featured images.
- Alignment: Align the post content left, center, right, or justified per breakpoint.
Build the Post Query
The Query section decides which posts appear in your Elementor post carousel. It works like a mini query builder:
- Source: Select the post type to display — Posts, Pages, or any registered custom post type.
- Limit: Set how many posts the carousel loads.
- Include / Exclude: Hand-pick posts to include or exclude, or filter by Terms (categories, tags, taxonomies) and Authors.
- Offset: Skip a number of posts from the start of the results.
- Date: Restrict posts to a time range such as past week, month, year, or a custom before/after window.
- Order By / Order: Sort by date, title, menu order, random, and more — ascending or descending.
- Ignore Sticky Posts: Decide whether sticky posts keep their priority position.
Configure Additional Options
The Additional section toggles each post element on or off:
- Show Title: Display the post title, with a Title HTML Tag selector (H1–H6, div, span, p) for SEO-friendly markup.
- Show Category: Display the post’s category badges above the content.
- Show Author: Display the author name linked to the author archive.
- Show Text: Display an excerpt, with a Text Limit (word count) and a Strip ShortCode switch to keep raw shortcodes out of the excerpt.
- Show Date: Display the publish date, with Human Diff Time (e.g. “3 days ago”), a short-format option, and an optional time display.
- Show Video: Detect video posts and show a play button on the thumbnail.
Configure Video Settings
When Show Video is enabled, the Video Settings section controls how videos open:
- Video Open: Open the video in a Lightbox or follow the post link, with an optional new-tab setting for file links.
- Entrance Animation & Aspect Ratio: Choose the lightbox animation and the video ratio (16:9, 4:3, etc.).
- Lazy Load, Autoplay, Mute: Fine-tune playback behavior inside the lightbox.
Configure Carousel Settings
The Carousel Settings section gives you full control over the slider motion:
- Height: Set a fixed carousel height per breakpoint, or leave it automatic.
- Item Gap: Control the space between slides.
- Autoplay & Autoplay Speed (ms): Auto-advance slides at your chosen interval, with Pause On Hover.
- Loop: Make the carousel cycle endlessly.
- Slide Speed (ms): Set the transition duration between slides.
- Transition Effect: Slide or Coverflow, with depth, rotate, stretch, and slide shadow options.
- Slides Per Group, Centered Slides, Grab Cursor, Free Mode: Advanced behaviors for how slides move and respond to dragging.
Configure Navigation and Pagination
- Navigation: Toggle Show Navigation and choose custom Prev / Next icons from the icon library.
- Pagination Type: Choose Bullets, Fraction, or Progress Bar, with a Dynamic Bullets option and progress bar position control.
- Alignment: Align pagination left, center, or right.
Style Your Luster Carousel
Head to the Style tab to make the carousel match your brand. Every element has its own dedicated section:
- Luster Carousel (Item):
Set padding, border, border radius, and box-shadow for each post card. - Image:
Add a gradient Image Overlay, border, border radius, box-shadow, and CSS filters to the featured image. - Title:
Control spacing, normal and hover colors, typography, and text shadow — plus the accent Bar Size and Bar Color under the title. - Text:
Style the excerpt color and typography. - Category:
Adjust spacing, space between badges, colors, background, and typography in normal and hover states. - Meta:
Style the author and date row — spacing, space between items, color, and typography. - Play Button:
Customize the video play button size, color, background, border, and hover state. - Navigation & Pagination:
Position the arrows precisely, style their size, color, background, and border, and customize bullet size, spacing, radius, and active colors.
These styling options let you turn the Luster Carousel into a polished blog showcase that fits any design system.
Save and Preview
- Once you’ve customized and styled your carousel, click “Publish” or “Update” to save your changes.
- Preview the page to ensure the widget looks and functions as desired.
Best Practices
- Consistency: Use the same image size and aspect ratio across posts so slides line up evenly.
- Accessibility: Keep autoplay speed comfortable (4000ms or more) and enable Pause On Hover so visitors can read each slide.
- Performance: Limit the post count to what visitors actually need — fewer slides means faster loading.
- Testing: Check the carousel on tablet and mobile breakpoints, since columns and height can differ per device.
Troubleshooting
- No Posts Showing: Check the Query section — the selected source, terms, or date filters may exclude everything. The widget renders nothing when the query finds no posts.
- Carousel Not Sliding: Ensure JavaScript is enabled and no other plugin loads a conflicting Swiper version; clear cache after changes.
- Images Look Cropped or Blurry: Switch the Image Size in the Layout section to a larger registered size, then regenerate thumbnails if needed.
Frequently Asked Questions
How do I choose which posts appear in the Luster Carousel?
Use the Query section. Select a Source (post type), then filter with Include/Exclude rules, Terms, Authors, a date range, and ordering. The Limit option controls how many posts load into the carousel.
Can the Luster Carousel display custom post types?
Yes. The Source dropdown in the Query section lists every public post type on your site, so you can build an Elementor post carousel from portfolios, products, events, or any other custom content.
How do I make the carousel autoplay and loop continuously?
In Carousel Settings, switch on Autoplay and set the Autoplay Speed in milliseconds, then enable Loop so the slides cycle endlessly. Pause On Hover stops the rotation while a visitor reads a slide.
Does the Luster Carousel support video posts?
Yes. With Show Video enabled, posts containing a video get a play button overlay, and the Video Settings section lets the video open in a lightbox with aspect ratio, autoplay, and mute options.
Can I shorten the excerpt text shown on each slide?
Yes. Enable Show Text in the Additional section and set the Text Limit to the number of words you want. Strip ShortCode keeps shortcode markup out of the trimmed text.
Related Documentation
Conclusion
The Luster Carousel Widget by Sky Addons for Elementor turns your latest posts into an elegant, auto-playing showcase with full control over query, layout, and motion. Utilize its customizable features to create a seamless user experience. For further assistance, consult the Sky Addons support team or community forums. Enjoy presenting your content in style!