Sky Addons for Elementor

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

Naive Carousel

How to use Naive Carousel Widget of Sky Addons for Elementor

Naive Carousel is a content-focused blog post carousel widget for Elementor that slides your posts across 1 to 6 columns with a prominent Read More button on every card. Posts are pulled automatically through the built-in Query builder and displayed with image, category, title, excerpt, author, and date — and posts with a video link open in a video lightbox. With two layouts, Slide and Coverflow effects, and full navigation and pagination, the Naive Carousel widget for Elementor is a click-friendly Elementor post carousel for driving readers into your articles. This documentation will guide you through the process of using the Naive 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 for the post card arrangement.
  3. Read More Button: A customizable button with text, icon, and icon position on every card.
  4. Query Builder: Filter by post type, terms, authors, and order, with a posts-per-page limit.
  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 Naive Carousel Widget

  1. Open Elementor Editor. In the Elementor panel, search for “Naive 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.
  5. Show Text: Toggle the excerpt, cap it with Text Limit (default 25 words; 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 Settings section (lightbox autoplay, mute, aspect ratio, animation, or open as file).
  8. Show Read More: Toggle the Read More button on each card.

Read More Button

When Show Read More is on, the Read More section lets you set the Button Text (dynamic-tag ready), pick an Icon, place it Before or After the text, and adjust the Icon Spacing. The button links each card to its full post.

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. Naive 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, space-between, color, and typography for the author/date row.
  7. Read More:
    Full button styling — colors, background, border, padding, and hover state.
  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. Clear Call to Action: Keep the Read More button text short and the button visually distinct from the card.
  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. Read More Button Missing: Make sure Show Read More is enabled in the Additional section and the Button Text is not empty.

Frequently Asked Questions

How do I autoplay the Naive 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 do I customize the Read More button in the Naive Carousel?

Enable Show Read More in the Additional section, then open the Read More section to change the Button Text, add an Icon before or after the text, and tune the Icon Spacing. The Read More style section handles colors, background, border, and hover.

What is the difference between Naive Carousel and Mate Carousel?

Both are query-driven post carousels with the same carousel engine. The Naive Carousel adds a dedicated Read More button with icon options on every card, while Mate Carousel emphasizes the author avatar/date meta block.

How do I add dots or a progress bar to the Naive Carousel?

In the Pagination section, choose Bullets, Fraction, or Progress Bar as the Type, set the Alignment, and style it in the Pagination style section. Select None to remove pagination entirely.

Can the Naive 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 Naive Carousel Widget by Sky Addons for Elementor pairs a sliding post showcase with a clear call to action on every card. Utilize its query builder, Read More button, and carousel engine to turn browsers into readers. For further assistance, consult the Sky Addons support team or community forums. Enjoy presenting your posts!

How can we help?