Content · Elementor
Quick Card Slider widget for Elementor
The slider version of Quick Card Grid: same cards, one row that moves.
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
The slider version of Quick Card Grid: same cards, one row that moves.
Quick Card Slider Widget (Free).
render() writes HTML data attributes: data-autoplay, data-autoplay-delay, data-card-link, data-card-link-rel, data-card-link-target, data-loop, data-navigation, data-pagination.
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.
Front-end motion uses Swiper (slidesPerView, autoplay, pagination) from values PHP writes onto the wrapper.
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 Card Slider”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Image”, “Title”, “Description”, “Button Text”. Style and Content tabs are listed on this page.
- Preview the published page. Quick Card Slider Widget (Free).
When to use it
- A mobile-friendly features row.
- A partner strip.
- A short case-study slider.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Quick Card Slider.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Cards — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Cards — Title | Text inspector control (`kng_card_title`). |
| Cards — Description | Textarea inspector control (`kng_card_description`). |
| Cards — Button Text | Text inspector control (`kng_card_button_text`). |
| Cards — Button Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Cards — Make Whole Card Clickable | Editor safety: the card link is disabled in the Elementor editor to prevent accidental navigation. |
| Cards — Card Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Cards — Card Badge (Pro) | Switcher inspector control (`kng_card_badge_pro_notice`). |
| Cards — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Cards | Repeater rows; render() loops each item to build the list or slides. |
| 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 — 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: Start; Center; End. |
| Navigation — Offset | Spacing/size control (min 0, max 80). |
| Navigation — Hide on Tablet | Switcher inspector control (`kng_navigation_hide_tablet`). |
| Navigation — Hide on Mobile | Switcher inspector control (`kng_navigation_hide_mobile`). |
| Navigation — Inside Padding | Spacing/size control (min 0, max 80). |
| Navigation — Arrows Gap | Spacing/size control (min 4, max 80). |
| 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 — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-slider__card`. |
| 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-card-slider__card`. |
| Card — Hover Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-slider__card:hover, {{WRAPPER}} .king-addons-card-slider_…`. |
| 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`). |
| Card — Image Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Card — Image Bottom Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 80). |
| Text — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-slider__title`. |
| Text — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Text — Typography (Kng Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-slider__description`. |
| Text — Description 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 — Text Alignment | Options: Left; Center; Right. |
| Text — Description Bottom Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 80). |
| Button — Button Alignment | Options: Left; Center; Right. |
| Button — Button Text Alignment | Options: Left; Center; Right. |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-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-card-slider__button`. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-slider__button`. |
| Button (Normal) — Hover Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-slider__button:hover`. |
| Button (Normal) — Disable Box Shadow | Switcher inspector control (`kng_button_shadow_disable`). |
| Button (Normal) — Disable Box Shadow on Hover | Switcher inspector control (`kng_button_shadow_hover_disable`). |
| 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-card-slider__button:hover`. |
| 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). |
| Navigation Arrows — Size | Spacing/size control (min 24, max 96). |
| Navigation Arrows — Icon Size | Spacing/size control (min 6, max 28). |
| Navigation Arrows (Normal) — Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Navigation Arrows (Normal) — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Navigation Arrows (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-slider__arrow`. |
| Navigation Arrows (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-slider__arrow`. |
| Navigation Arrows (Hover) — Icon Color | Writes CSS (arrow, color) onto the widget’s front-end markup. |
| Navigation Arrows (Hover) — Background | Writes CSS (arrow, background-color) onto the widget’s front-end markup. |
| Navigation Arrows (Hover) — Border Color | Writes CSS (arrow, border-color) onto the widget’s front-end markup. |
| Navigation Arrows (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-slider__arrow:hover`. |
| Navigation Arrows — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 80). |
| Pagination Dots — Dot Size | Spacing/size control (min 4, max 24). |
| Pagination Dots (Normal) — Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Pagination Dots (Active) — Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Pagination Dots (Active) — Active Width | Spacing/size control (min 4, max 32). |
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 Card 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 Card Slider in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Quick Card 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
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.
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Posts Grid & Slider
Posts in a grid, slider, or carousel with query and layout controls (the Posts Grid widget).
Quick Card Grid
A fast card grid with simple fields. Use when you do not need a post query or heavy animations.
Quick Post Slider
A lightweight post slider with navigation and pagination that does not overlap the slides.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Quick Card Slider after you activate it.