Content · Elementor
Advanced Blog Posts Carousel widget for Elementor
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Content is loaded with WP_Query in PHP (not a hardcoded list in the editor).
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Advanced Blog Posts Carousel”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Number of latest posts”, “Trim description to a certain number of words.”, “Loop Cards”, “Rewind Cards”. Style and Content tabs are listed on this page.
When to use it
- Below a long article.
- A homepage news strip.
- An author’s other posts.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Advanced Blog Posts Carousel.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Carousel Settings — Number of latest posts | WP_Query `posts_per_page` — how many posts are fetched (default 5, min 1). |
| Carousel Settings — Trim description to a certain number of words. | Word count passed to WordPress excerpt trimming for each card (default 30, min 1). |
| Carousel Settings — Loop Cards | When this switch is on, render() outputs Swiper loop (last slide wraps to the first). |
| Carousel Settings — Rewind Cards | When enabled, clicking the next navigation button when on last slide will slide back to the first slide. Clicking the prev navigation button when on first slide will slide forward to the last slide. Should not be used together with loop mode. |
| Carousel Settings — Ignore sticky posts | Passed through to WP_Query ignore_sticky_posts. Check the page on live preview to see sticky posts. |
| Carousel Settings — Autoplay Carousel Cards | When this switch is on, render() outputs the Swiper autoplay object. |
| Carousel Settings — Delay between transitions (ms) | Swiper `autoplay.delay` in milliseconds (default 2000, min 0). |
| Carousel Settings — Disable on interaction | Autoplay will be disabled after user interactions (swipes), it will not be restarted every time after interaction. |
| Carousel Settings — Pause on mouse enter | When enabled autoplay will be paused on pointer (mouse) enter over carousel container. |
| Carousel Settings — Reverse Direction | Enables autoplay in reverse direction. |
| Carousel Settings — Autoplay Like Ticker (marquee effect) | Autoscrolls cards as on ticker, also known as marquee effect. |
| Carousel Settings — Autoplay Speed (ms) | Swiper `speed` (slide animation length) in milliseconds (default 6000, min 0). |
| Carousel Settings — Scrolling Speed (ms) | Swiper `speed` (slide animation length) in milliseconds (default 600, min 0). |
| Disable Card Items — Disable image | When this switch is on, render() skips the featured image. |
| Disable Card Items — Disable Title | When this switch is on, render() skips the post title. |
| Disable Card Items — Disable Description | When this switch is on, render() skips the post excerpt. |
| Disable Card Items — Disable whole text container | Text container includes title and description. |
| Card Layout — Make card full height | Writes CSS `height` onto the widget’s front-end markup. Options: No; Yes. |
| Card Layout — Align Whole Card | Writes CSS `align-self` onto the widget’s front-end markup. Options: Default; Start; Center; End. |
| Card Layout — Align Card Content | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Default; Start; Center; End. |
| Card Layout — Position | Writes CSS `flex-flow` onto the widget’s front-end markup. Options: Left; Top; Bottom; Right. |
| Card Layout — Height | Writes CSS `height` onto the widget’s front-end markup. Options: Auto; Custom (%). |
| Card Layout — Custom height (%) | Writes CSS `height` onto the widget’s front-end markup. (default 100, min 0, max 100). |
| Card Layout — Align Content | Writes CSS (justify-content, align-items, align-self) onto the widget’s front-end markup. Options: Default; Start; Center; End. |
| Card Layout — Width | Options: Auto; Custom (%). |
| Card Layout — Custom width (%) | Writes CSS `width` onto the widget’s front-end markup. (default 100, min 0, max 100). |
| Card Layout — Align Content (Kng Blog Posts Cards Text Container Align Content) | Writes CSS (justify-content, align-items, align-self) onto the widget’s front-end markup. Options: Default; Start; Center; End. |
| Responsive Settings — Cards per view | The number of slides per view can be a fractional number like 4.5, 5.25, 6.45, etc., to indicate that further slides exist. |
| Responsive Settings — Space between cards (px) | Swiper `spaceBetween` in pixels (default 30, min 0). |
| Responsive Settings — Cards per view (Kng Blog Posts Tablet Cards Per View) | Swiper `spaceBetween` in pixels (default 3.0, min 1). |
| Responsive Settings — Space between cards (px) (Kng Blog Posts Tablet Space Between Cards) | Numeric value used in this widget’s render/JS (default 30, min 0). |
| Responsive Settings — Breakpoint (px) | Swiper `slidesPerView` — slides visible at once (default 1024, min 1). |
| Responsive Settings — Cards per view (Kng Blog Posts Mobile Cards Per View) | Swiper `spaceBetween` in pixels (default 1.0, min 1). |
| Responsive Settings — Space between cards (px) (Kng Blog Posts Mobile Space Between Cards) | Numeric value used in this widget’s render/JS (default 30, min 0). |
| Responsive Settings — Breakpoint (px) (Kng Blog Posts Mobile Breakpoint) | Swiper `slidesPerView` — slides visible at once (default 767, min 1). |
| Navigation — Enable navigation | When this switch is on, render() outputs prev/next carousel arrows. |
| Navigation — Display on different screen sizes | Writes CSS `display` onto the widget’s front-end markup. Options: Show; Hide. |
| Pagination — Enable pagination | When this switch is on, render() outputs Swiper dynamic pagination bullets. |
| Pagination — Type | Swiper `pagination.type` on the front end. Options: Bullets; Progress Bar; Fraction. |
| Pagination — Progress bar position | Check margin settings to properly set the position of the progress bar. |
| Pagination — Clickable Bullets | Switcher inspector control (`kng_blog_posts_pag_clickable_switcher`). |
| Pagination — Dynamic Bullets | Good to enable if you use bullets pagination with a lot of cards. So it will keep only few bullets visible at the same time. |
| Pagination — Number of Dynamic Bullets | The number of main bullets visible when Dynamic Bullets enabled. |
| Pagination — Display on different screen sizes | Writes CSS `display` onto the widget’s front-end markup. Options: Show; Hide. |
| Image — Image Resolution | WordPress image size name passed into the thumbnail URL. Options: Thumbnail; Medium; Large; Full. |
| Image — Height | Options: Auto; Custom (px); Custom (%). |
| Image — Width | Options: Auto; Width (%); Maximum Width (px). |
| Image — Width (%) | Writes CSS `width` onto the widget’s front-end markup. (default 100, min 0, max 100). |
| Image — Maximum Width (px) | Writes CSS `max-width` onto the widget’s front-end markup. (default 200, min 0). |
| Image — Height (px) | Writes CSS `height` onto the widget’s front-end markup. (default 200, min 0). |
| Image — Height (%) | Writes CSS `height` onto the widget’s front-end markup. (default 100, min 0). |
| Image — Image Fit | Writes CSS `object-fit` onto the widget’s front-end markup. Options: Cover; Contain. |
| Image — Image Fit Position | Writes CSS `object-position` onto the widget’s front-end markup. Options: Top; Bottom; Left; Right; Center. |
| Image — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Image — CSS Filter | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-blog-posts-image img`. |
| Image — CSS Filter for image on card hover | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-blog-posts-card:hover .king-addons-blog-posts-image img`. |
| Image — Transition duration on hover (ms) | Writes CSS `transition` onto the widget’s front-end markup. (default 300, min 0). |
| Image — Scale image on card hover | Switcher inspector control (`kng_blog_posts_image_scale_switcher`). |
| Image — Scale on hover | Writes CSS (king-addons-blog-posts-card, transform) onto the widget’s front-end markup. (default 1.3, min 0). |
| Image — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Image — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Image — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-image`. |
| Image — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-blog-posts-image`. |
| Image — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-blog-posts-title`. |
| Title — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title — Text Color on hover | Writes CSS (king-addons-blog-posts-title, color) onto the widget’s front-end markup. |
| Title — Transition duration on hover (ms) | Writes CSS `transition` onto the widget’s front-end markup. (default 300, min 0). |
| Title — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Title — Text Align | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Title — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Title — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-title`. |
| Title — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-blog-posts-title`. |
| Title — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Description — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-de…`. |
| Description — Text Color | Writes CSS (king-addons-blog-posts-description, color) onto the widget’s front-end markup. |
| Description — Background Color | Writes CSS (king-addons-blog-posts-description, background-color) onto the widget’s front-end markup. |
| Description — Text Align | Writes CSS (king-addons-blog-posts-description, text-align) onto the widget’s front-end markup. Options: Left; Center; Right. |
| Description — Padding | Writes CSS (king-addons-blog-posts-description, padding) onto the widget’s front-end markup. |
| Description — Margin | Writes CSS (king-addons-blog-posts-description, margin) onto the widget’s front-end markup. |
| Description — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-de…`. |
| Description — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-de…`. |
| Description — Border Radius | Writes CSS (king-addons-blog-posts-description, border-radius) onto the widget’s front-end markup. |
| Navigation — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Navigation — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Navigation — Scale on hover (%) | Writes CSS (king-addons-blog-posts-nav-prev, transform) onto the widget’s front-end markup. (default 1.3, min 0). |
| Navigation — Vertical position (%) | Writes CSS `top` onto the widget’s front-end markup. (min 0, max 100). |
| Navigation — Horizontal position (%) | Writes CSS `left` onto the widget’s front-end markup. (min 0, max 100). |
| Navigation — Icon (Kng Blog Posts Nav Icon Next) | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Navigation — Margin (Kng Blog Posts Nav Margin Next) | Writes CSS `margin` onto the widget’s front-end markup. |
| Navigation — Scale on hover (%) (Kng Blog Posts Nav Next Transform Scale) | Writes CSS (king-addons-blog-posts-nav-next, transform) onto the widget’s front-end markup. (default 1.3, min 0). |
| Navigation — Vertical position (%) (Kng Blog Posts Nav Position V Next) | Writes CSS `top` onto the widget’s front-end markup. (min 0, max 100). |
| Navigation — Horizontal position (%) (Kng Blog Posts Nav Position H Next) | Writes CSS `right` onto the widget’s front-end markup. (min 0, max 100). |
| Navigation — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (default 32, min 0). |
| Navigation — Transition duration for icon on hover (ms) | Writes CSS `transition` onto the widget’s front-end markup. (default 300, min 0). |
| Navigation — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Navigation (Normal) — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Navigation (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Navigation (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-nav-inner`. |
| Navigation (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-blog-posts-nav-inner`. |
| Navigation (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Navigation (Hover) — Color | Writes CSS (i, color, svg, fill) onto the widget’s front-end markup. |
| Navigation (Hover) — Background Color | Writes CSS (king-addons-blog-posts-nav-inner, background-color) onto the widget’s front-end markup. |
| Navigation (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-nav-inner:hover`. |
| Navigation (Hover) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-blog-posts-nav-inner:hover`. |
| Navigation (Hover) — Border Radius | Writes CSS (king-addons-blog-posts-nav-inner, border-radius) onto the widget’s front-end markup. |
| Pagination — Color | Color written to this widget’s CSS selector. |
| Pagination — Second Color | Color written to this widget’s CSS selector. |
| Pagination — Size | Numeric control (default 8, min 0). |
| Pagination — Bullets gap | Numeric control (default 4, min 0). |
| Pagination — Size (Kng Blog Posts Pag Progressbar Size) | Numeric control (default 4, min 0). |
| Pagination — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-blog-posts-pagination.swiper-pagination-fraction`. |
| Whole Carousel — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-items`. |
| Whole Carousel — Whole carousel margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Whole Carousel — Cards wrapper margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Whole Carousel — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Whole Carousel — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-items`. |
| Whole Carousel — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-blog-posts-items`. |
| Whole Carousel — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Whole Card — Transition duration on card hover (ms) | Writes CSS `transition` onto the widget’s front-end markup. (default 300, min 0). |
| Whole Card (Normal) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-card-inner`. |
| Whole Card (Normal) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Whole Card (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-card-inner`. |
| Whole Card (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-blog-posts-card-inner`. |
| Whole Card (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Whole Card (Hover) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-card-inner:hover`. |
| Whole Card (Hover) — Padding | Writes CSS (king-addons-blog-posts-card-inner, padding) onto the widget’s front-end markup. |
| Whole Card (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-card-inner:hover`. |
| Whole Card (Hover) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-blog-posts-card-inner:hover`. |
| Whole Card (Hover) — Border Radius | Writes CSS (king-addons-blog-posts-card-inner, border-radius) onto the widget’s front-end markup. |
| Whole Text Container — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Whole Text Container — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Whole Text Container — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Whole Text Container — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-blog-posts-card-container-2`. |
| Whole Text Container — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-blog-posts-card-container-2`. |
| Whole Text Container — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Advanced Blog Posts Carousel actually change on the page?
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid. Inspector labels from this widget’s PHP include “Number of latest posts”, “Trim description to a certain number of words.”, “Loop Cards”, “Rewind Cards”.
How do I add Advanced Blog Posts Carousel in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Advanced Blog Posts Carousel”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related content widgets
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Reading Progress Bar
A thin bar that fills as the visitor reads the page. Put it on long articles, not on a homepage grid.
Quick Card Slider
The slider version of Quick Card Grid: same cards, one row that moves.
Taxonomy List
A list of categories or tags as a navigation block.
Team Member Slider
Several team members in a slider instead of a wrapping grid.
Global Section & Container
Renders a saved Elementor section or container so you can reuse a header strip or CTA without duplicating it.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Advanced Blog Posts Carousel after you activate it.