Content · Elementor
Quick Post Slider widget for Elementor
A lightweight post slider with navigation and pagination that does not overlap the slides.
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 lightweight post slider with navigation and pagination that does not overlap the slides.
Quick Post Slider Widget (Free).
render() writes HTML data attributes: data-autoplay, data-autoplay-delay, data-autoplay-pause-on-hover, data-autoplay-stop-on-interaction, data-card-link, data-card-link-target, data-loop, data-navigation.
Content is loaded with WP_Query in PHP (not a hardcoded list in the editor).
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-card-link.
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 “Quick Post Slider”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Order By”, “Order”, “Categories (Pro)”, “Ignore Sticky Posts”. Style and Content tabs are listed on this page.
- Preview the published page. Quick Post Slider Widget (Free).
When to use it
- A homepage news slider.
- Related posts under an article.
- A compact editorial strip.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Quick Post Slider.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Query — Order By | The chosen value is read in render() and applied on the front end. Options: Date; Title; Random; Menu Order. |
| Query — Order | The chosen value is read in render() and applied on the front end. Options: Descending; Ascending. |
| Query — Categories (Pro) | Enter category slugs separated by commas. |
| Query — Ignore Sticky Posts | Passed through to WP_Query ignore_sticky_posts. |
| Query — Show Featured Image | Switcher inspector control (`kng_show_image`). |
| Query — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Query — Image Ratio | The chosen value is read in render() and applied on the front end. Options: Original; 1:1; 4:3; 3:2; 16:9. |
| Query — Image Fit | Options: Cover; Contain. |
| Query — Image Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Query — Image Bottom Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 80). |
| Query — Show Meta | Switcher inspector control (`kng_show_meta`). |
| Query — Show Author | Switcher inspector control (`kng_show_author`). |
| Query — Show Date | Switcher inspector control (`kng_show_date`). |
| Query — Meta Separator | Saved on the widget and consumed in render(). |
| Query — Show Excerpt | Switcher inspector control (`kng_show_excerpt`). |
| Query — Excerpt Length (words) | Numeric value used in this widget’s render/JS (default 18, min 5, max 80). |
| Query — Show Read More | Switcher inspector control (`kng_show_read_more`). |
| Query — Read More Text | Printed in the widget HTML from render(). |
| Query — Make Card Clickable | Card click is disabled inside the Elementor editor to avoid interfering with editing. |
| Query — Open Card in New Tab | Switcher inspector control (`kng_card_link_new_tab`). |
| Slider Settings — Slides Per View | Numeric value used in this widget’s render/JS (default 3, min 1, max 6). |
| Slider Settings — Slides Per View (Tablet) | Numeric value used in this widget’s render/JS (default 2, min 1, max 6). |
| Slider Settings — Slides Per View (Mobile) | Numeric value used in this widget’s render/JS (default 1, min 1, max 6). |
| Slider Settings — Space Between (px) | Spacing/size control (min 0, max 80). |
| Slider Settings — Loop | Switcher inspector control (`kng_loop`). |
| Slider Settings — Autoplay | Passed through to Swiper autoplay. |
| Slider Settings — Autoplay Delay (ms) | Numeric value used in this widget’s render/JS (default 3200, min 100). |
| Slider Settings — Pause on Hover | Passed through to Swiper autoplay. |
| Slider Settings — Stop on Interaction | Passed through to Swiper autoplay. |
| Slider Settings — Transition Speed (ms) | Numeric value used in this widget’s render/JS (default 600, min 100). |
| Navigation — Show Arrows | Passed through to prev/next carousel arrows. |
| Navigation — Position | Selects the value used for prev/next carousel arrows. Options: Outside; Inside. |
| Navigation — Alignment | Selects the value used for prev/next carousel arrows. Options: Top; Center; Bottom. |
| Navigation — Offset | Spacing/size control (min 0, max 80). |
| Navigation — Arrows Gap | Spacing/size control (min 4, max 80). |
| Navigation — Hide on Tablet | Switcher inspector control (`kng_navigation_hide_tablet`). |
| Navigation — Hide on Mobile | Switcher inspector control (`kng_navigation_hide_mobile`). |
| Pagination — Show Pagination | Passed through to Swiper pagination. |
| Pagination — Position | Swiper `pagination.type` on the front end. Options: Outside; Inside. |
| Pagination — Alignment | Swiper `pagination.type` on the front end. Options: Start; Center; End. |
| Pagination — Offset | Spacing/size control (min 0, max 80). |
| Pagination — Dots Gap | Spacing/size control (min 2, max 36). |
| Card — Track Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card — Card Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Card — Background Hover | Writes CSS (card, background-color) onto the widget’s front-end markup. |
| Card — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-post-slider__card`. |
| Card — Border Color Hover | Writes CSS (card, border-color) onto the widget’s front-end markup. |
| Card — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Card — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-post-slider__card`. |
| Card — Box Shadow (Kng Card Shadow Hover) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-post-slider__card:hover`. |
| Card — Disable Box Shadow | Switcher inspector control (`kng_card_shadow_disable`). |
| Card — Disable Box Shadow on Hover | Switcher inspector control (`kng_card_shadow_hover_disable`). |
| Text — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-post-slider__title`. |
| Text — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Text — Title Bottom Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 60). |
| Text — Typography (Kng Excerpt Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-post-slider__excerpt`. |
| Text — Excerpt Color | Writes CSS `color` onto the widget’s front-end markup. |
| Text — Excerpt Bottom Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 80). |
| Text — Text Alignment | Options: Left; Center; Right. |
| Meta — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-post-slider__meta`. |
| Meta — Meta Color | Writes CSS `color` onto the widget’s front-end markup. |
| Meta — Meta Bottom Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 60). |
| Button — Button Alignment | Options: Left; Center; Right. |
| Button — Button Text Alignment | Options: Left; Center; Right. |
| Button — Full Width | Switcher inspector control (`kng_button_full_width`). |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-post-slider__button`. |
| Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button (Normal) — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Button (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-post-slider__button`. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-post-slider__button`. |
| Button (Hover) — Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Button (Hover) — Background | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Button (Hover) — Border Color | Writes CSS (button, border-color) onto the widget’s front-end markup. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-post-slider__button:hover`. |
| Button — Button Top Spacing | Writes CSS `margin-top` onto the widget’s front-end markup. (min 0, max 80). |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 80). |
| Button — Disable Box Shadow | Switcher inspector control (`kng_button_shadow_disable`). |
| Button — Disable Box Shadow on Hover | Switcher inspector control (`kng_button_shadow_hover_disable`). |
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
Which Quick Post Slider options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Quick Post Slider in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Quick Post Slider”, 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
Posts Grid & Slider
Posts in a grid, slider, or carousel with query and layout controls (the Posts Grid widget).
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Magazine Grid & Slider
A magazine layout: mixed tile sizes for featured and secondary posts, as a grid or slider.
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Content Ticker
A scrolling ticker of posts or custom items for headlines and announcements.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Quick Post Slider after you activate it.