How to use Generic Carousel Widget of Sky Addons for Elementor

Generic Carousel is a versatile Elementor post carousel widget that presents your blog posts, news, or any post type in clean sliding cards topped with a distinctive date badge. Each slide shows the featured image, category, title, and an optional excerpt, while the badge displays the publish day and month and can sit at the top left or top right of the card. With a flexible Query builder and full Swiper carousel controls — autoplay, loop, navigation arrows, and pagination — the Generic Carousel widget for Elementor is a dependable choice for news and magazine layouts. This documentation will guide you through the process of using the Generic Carousel Widget on your website.

Features:

1. Powerful Query Builder: Pull posts from any post type and filter by terms, authors, include/exclude rules, date, order, and offset.
2. Date Badge: A stylish day-and-month badge over the image, positionable top left or top right, with separate Date and Month typography.
3. Responsive Columns: Show 1 to 6 slides per view with separate defaults for desktop, tablet, and mobile.
4. Rich Post Elements: Toggle the title, category, date, and excerpt independently, with a configurable text limit.
5. Video Support: Video posts get a play button and can open in a lightbox with aspect ratio, autoplay, and mute options.
6. Full Carousel Control: Autoplay, loop, slide speed, pause on hover, centered slides, free mode, grab cursor, and transition effects including coverflow.
7. Navigation & Pagination: Prev/next arrows with custom icons plus bullets, fraction, or progress bar pagination.
8. Hover Card States: Separate normal and hover styling for card background, box-shadow, and border color.

Insert Generic Carousel Widget

1. Open Elementor Editor. In the Elementor panel, search for “Generic Carousel” under Sky Addons.
2. 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:

1. Columns: Choose how many slides are visible at once (1–6). Set different values for desktop, tablet, and mobile.
2. 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:

1. Source: Select the post type to display — Posts, Pages, or any registered custom post type.
2. Limit: Set how many posts the carousel loads.
3. Include / Exclude: Hand-pick posts to include or exclude, or filter by Terms (categories, tags, taxonomies) and Authors.
4. Offset: Skip a number of posts from the start of the results.
5. Date: Restrict posts to a time range such as past week, month, year, or a custom before/after window.
6. Order By / Order: Sort by date, title, menu order, random, and more — ascending or descending.
7. Ignore Sticky Posts: Decide whether sticky posts keep their priority position.

Configure Additional Options

The Additional section toggles each post element on or off:

1. Show Title: Display the post title, with a Title HTML Tag selector (H1–H6, div, span, p) for SEO-friendly markup.
2. Show Category: Display the post’s category badges.
3. Show Text: Display an excerpt, with a Text Limit (word count) and a Strip ShortCode switch to keep raw shortcodes out of the excerpt.
4. Show Date: Display the day-and-month date badge over the featured image.
5. 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:

1. Video Open: Open the video in a Lightbox or follow the post link, with an optional new-tab setting for file links.
2. Entrance Animation & Aspect Ratio: Choose the lightbox animation and the video ratio (16:9, 4:3, etc.).
3. 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:

1. Item Gap: Control the space between slides.
2. Autoplay & Autoplay Speed (ms): Auto-advance slides at your chosen interval, with Pause On Hover.
3. Loop: Make the carousel cycle endlessly.
4. Slide Speed (ms): Set the transition duration between slides.
5. Transition Effect: Slide or Coverflow, with depth, rotate, stretch, and slide shadow options.
6. Slides Per Group, Centered Slides, Grab Cursor, Free Mode: Advanced behaviors for how slides move and respond to dragging.

Configure Navigation and Pagination

1. Navigation: Toggle Show Navigation and choose custom Prev / Next icons from the icon library.
2. Pagination Type: Choose Bullets, Fraction, or Progress Bar, with a Dynamic Bullets option and progress bar position control.
3. Alignment: Align pagination left, center, or right.

Style Your Generic Carousel

Head to the Style tab to make the carousel match your brand. Every element has its own dedicated section:

1. Generic Carousel (Item):
   Set the card Padding and a separate Content Padding, border, and border radius, with Normal and Hover tabs for background, box-shadow, and border color.
2. Image:
   Control the image Height, padding, margin, border, border radius, and box-shadow.
3. Title:
   Adjust spacing, colors (normal and hover), typography, and text shadow.
4. Text:
   Style the excerpt color and typography.
5. Category:
   Adjust spacing and the content Position offset, plus colors, background, and typography in normal and hover states.
6. Meta (Date Badge):
   Set the badge Position (top left / top right), spacing, padding, and background — then style the Date (day) and Month separately with color, typography, and text shadow.
7. Play Button:
   Customize the video play button size, color, background, border, and hover state.
8. 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 shape the Generic Carousel into a polished news or blog slider that fits any design system.

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: Keep the date badge in the same corner across all carousels for a uniform look.
2. Accessibility: Keep autoplay speed comfortable (4000ms or more) and enable Pause On Hover so visitors can read each slide.
3. Performance: Limit the post count to what visitors actually need — fewer slides means faster loading.
4. Testing: Check the carousel on tablet and mobile breakpoints, since columns and badge positioning can differ per device.

Troubleshooting

1. 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.
2. Carousel Not Sliding: Ensure JavaScript is enabled and no other plugin loads a conflicting Swiper version; clear cache after changes.
3. Date Badge Missing: Make sure Show Date is enabled in the Additional section, and check the Meta style section’s Position setting.

Frequently Asked Questions

How do I move the date badge to the other corner of the card?

Open the Meta section in the Style tab and use the Position control to place the badge at the Top Left or Top Right of the featured image. You can also adjust its padding, background, and spacing there.

Can I style the day and month of the date badge separately?

Yes. The Meta style section includes separate Date and Month groups, each with its own color, typography, and text shadow, so the day number can be large and bold while the month stays small.

How do I choose which posts the Generic Carousel displays?

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 this Elementor post carousel.

How do I enable autoplay and looping?

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 Generic 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.

Related Documentation

• Stellar Blog Slider
• Pace Slider
• Momentum Slider
• Remote Arrows

Conclusion

The Generic Carousel Widget by Sky Addons for Elementor pairs a dependable post slider with a distinctive date badge for news-style layouts. Utilize its customizable features to create a seamless user experience. For further assistance, consult the Sky Addons support team or community forums. Enjoy showcasing your latest stories!