Media · Elementor
Slider/Carousel widget for Elementor
A general slider for images, text, or mixed slides. Use this for heroes; use Posts Grid for post queries.
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 general slider for images, text, or mixed slides. Use this for heroes; use Posts Grid for post queries.
render() writes HTML data attributes: data-slick, data-slide-effect, data-video-autoplay, data-video-btn-size, data-video-controls, data-video-loop, data-video-mute, data-video-src.
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-slide-effect, data-video-autoplay, data-video-controls, data-video-loop, data-video-mute, data-video-src.
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 “Slider/Carousel”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Content Type”, “Image”, “Size”, “Link Type”. Style and Content tabs are listed on this page.
When to use it
- A homepage hero.
- A campaign carousel.
- A testimonial-style image slider.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Slider/Carousel.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| slider_items — Content Type | Select inspector control (`slider_content_type`). |
| slider_items (Background) — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| slider_items (Background) — Size | Writes CSS `background-size` onto the widget’s front-end markup. Options: Cover; Contain; Auto. |
| slider_items (Background) — Link Type | Options: None; Custom URL (Pro); Youtube (Pro); Vimeo (Pro); Custom Video (Pro). |
| slider_items (Background) — Slider Item Bg Image Url | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| slider_items (Background) — Choose File | Media Library attachment(s); render() uses the URL/ID as the image source. |
| slider_items (Background) — Video URL | Text inspector control (`slider_item_video_src`). |
| slider_items (Background) — Autoplay | Switcher inspector control (`slider_item_video_autoplay`). |
| slider_items (Background) — Loop | Switcher inspector control (`slider_item_video_loop`). |
| slider_items (Background) — Mute | Switcher inspector control (`slider_item_video_mute`). |
| slider_items (Background) — Controls | Switcher inspector control (`slider_item_video_controls`). |
| slider_items (Background) — Start Time | Specify a start time (in seconds). |
| slider_items (Background) — End Time | Specify an end time (in seconds). |
| slider_items (Background) — Ken Burn Effect (Pro) | Switcher inspector control (`slider_item_bg_kenburns`). |
| slider_items (Background) — Background Overlay | Switcher inspector control (`slider_item_overlay`). |
| slider_items (Background) — Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| slider_items (Background) — Blend Mode | Writes CSS `mix-blend-mode` onto the widget’s front-end markup. Options: Normal; Multiply; Screen; Overlay; Darken; Lighten; Color-dodge; Color-burn…. |
| slider_items (Content) — Show Sldier Content | Switcher inspector control (`slider_show_content`). |
| slider_items (Content) — Title HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6. |
| slider_items (Content) — Title | Text inspector control (`slider_item_title`). |
| slider_items (Content) — Sub Title HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6. |
| slider_items (Content) — Sub Title | Text inspector control (`slider_item_sub_title`). |
| slider_items (Content) — Description | Textarea inspector control (`slider_item_description`). |
| slider_items (Content) — Button Primary | Switcher inspector control (`slider_item_btn_1`). |
| slider_items (Content) — Text | Text inspector control (`slider_item_btn_text_1`). |
| slider_items (Content) — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| slider_items (Content) — Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| slider_items (Content) — Button Secondary | Switcher inspector control (`slider_item_btn_2`). |
| slider_items (Content) — Text (Slider Item Btn Text 2) | Text inspector control (`slider_item_btn_text_2`). |
| slider_items (Content) — Select Icon (Slider Item Btn Icon 2) | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| slider_items (Content) — Link (Slider Item Btn Url 2) | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Slides — Slider Items | Repeater rows; render() loops each item to build the list or slides. |
| Settings — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Settings — Media Type | Selects the value used for the featured image. Options: Background; Image. |
| Settings — Height | Writes CSS `height` onto the widget’s front-end markup. (min 20, max 1500). |
| Settings — Columns (Carousel) | The chosen value is read in render() and applied on the front end. Options: One; Two; Three (Pro); Four (Pro); Five (Pro); Six (Pro). |
| Settings — Slides to Scroll | Numeric control (default 1, min 1, max 2). |
| Settings — Gutter | Writes CSS `margin-left` onto the widget’s front-end markup. (min 0, max 300). |
| Settings — Title | Switcher inspector control (`slider_title`). |
| Settings — Title HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6. |
| Settings — Sub Title | Switcher inspector control (`slider_sub_title`). |
| Settings — Sub Title HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6. |
| Settings — Description | Passed through to the post excerpt. |
| Settings — Navigation | Switcher inspector control (`slider_nav`). |
| Settings — Show on Hover (Pro) | Switcher inspector control (`slider_nav_hover`). |
| Settings — Select Icon | Selects the value used for prev/next carousel arrows. Options: Angle; Angle Double; Arrow; Arrow Circle; Arrow Circle Alt; Long Arrow; Chevron. |
| Settings — Pagination | Switcher inspector control (`slider_dots`). |
| Settings — Pagination Layout | Options: Horizontal; Vertical (Pro). |
| Settings — Scroll to Section Button (Pro) | When this switch is on, render() outputs the wrapped markup. |
| Settings — Autoplay (Pro) | Passed through to Swiper autoplay. |
| Settings — Pause on Hover (Pro) | Switcher inspector control (`pause_on_hover`). |
| Settings — Infinite Loop | Switcher inspector control (`slider_loop`). |
| Settings — Effect | The chosen value is read in render() and applied on the front end. Options: Slide; Sl Vertical (Pro); Fade. |
| Settings — Effect Duration | Numeric value used in this widget’s render/JS (default 0.7, min 0, max 5). |
| Settings — Content Animation | Animation picker; the chosen effect is applied on the front end. |
| Settings — Animation Size | The chosen value is read in render() and applied on the front end. Options: Small; Medium; Large. |
| Settings — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 1, min 0, max 5). |
| Slider Content — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Slider Content — Horizontal Position | Options: Left; Center; Right. |
| Slider Content — Vertical Position | Writes CSS `vertical-align` onto the widget’s front-end markup. Options: Top; Middle; Bottom. |
| Slider Content — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Slider Content — Width | Writes CSS `max-width` onto the widget’s front-end markup. (min 20, max 100). |
| Slider Content — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Title — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title — Background Color | Writes CSS `background-color` 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-slider-title *`. |
| Title — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Sub Title — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Sub Title — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Sub Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-slider-sub-title *`. |
| Sub Title — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Sub Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Description — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Description — Background Color | Writes CSS `background-color` 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-slider-description p`. |
| Description — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Description — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Button Primary (Normal) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-slider-primary-btn`. |
| Button Primary (Normal) — Text Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Button Primary (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Button Primary (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-slider-primary-btn`. |
| Button Primary (Hover) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-slider-primary-btn:hover`. |
| Button Primary (Hover) — Text Color | Writes CSS (king-addons-slider-primary-btn, color, fill) onto the widget’s front-end markup. |
| Button Primary (Hover) — Border Color | Writes CSS (king-addons-slider-primary-btn, border-color) onto the widget’s front-end markup. |
| Button Primary (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-slider-primary-btn:hover`. |
| Button Primary — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Button Primary — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-slider-primary-btn`. |
| Button Primary — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 5, max 30). |
| Button Primary — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button Primary — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Button Primary — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Button Primary — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Button Primary — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Button Secondary (Normal) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-slider-secondary-btn`. |
| Button Secondary (Normal) — Text Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Button Secondary (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Button Secondary (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-slider-secondary-btn`. |
| Button Secondary (Hover) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-slider-secondary-btn:hover`. |
| Button Secondary (Hover) — Text Color | Writes CSS (king-addons-slider-secondary-btn, color, fill) onto the widget’s front-end markup. |
| Button Secondary (Hover) — Border Color | Writes CSS (king-addons-slider-secondary-btn, border-color) onto the widget’s front-end markup. |
| Button Secondary (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-slider-secondary-btn:hover`. |
| Button Secondary — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Button Secondary — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-slider-secondary-btn`. |
| Button Secondary — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 5, max 30). |
| Button Secondary — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button Secondary — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Button Secondary — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Button Secondary — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Button Secondary — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Video Icon — Video Icon Size | The chosen value is read in render() and applied on the front end. Options: None; Small; Medium; Large. |
| Video Icon — Text Color | Writes CSS (color, border-color) 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) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Navigation (Hover) — Color | Writes CSS (king-addons-slider-arrow, color, fill) onto the widget’s front-end markup. |
| Navigation (Hover) — Background Color | Writes CSS (king-addons-slider-arrow, background-color) onto the widget’s front-end markup. |
| Navigation (Hover) — Border Color | Writes CSS (king-addons-slider-arrow, border-color) onto the widget’s front-end markup. |
| Navigation — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Navigation — Font Size | Writes CSS (font-size, width) onto the widget’s front-end markup. (min 10, max 200). |
| Navigation — Box Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 10, max 200). |
| Navigation — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Navigation — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Navigation — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Pagination (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Pagination (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Pagination (Active) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Pagination (Active) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Pagination — Box Width | Writes CSS `width` onto the widget’s front-end markup. (min 1, max 100). |
| Pagination — Box Height | Writes CSS `height` onto the widget’s front-end markup. (min 1, max 100). |
| Pagination — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Pagination — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Pagination — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Pagination — Gutter | Writes CSS (margin-right, margin-bottom) onto the widget’s front-end markup. (min 0, max 50). |
| Pagination — Vertical Position | Writes CSS `top` onto the widget’s front-end markup. (min -20, max 120). |
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 Slider/Carousel 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 Slider/Carousel in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Slider/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 media widgets
Advanced Image Gallery
A gallery of images and optional videos from the Media Library or a manual list, with lightbox.
Image Grid
A masonry or fit-rows image grid. No post query — just images.
Image Accordion
Panels of images that expand on hover or click. This is a gallery layout, not the FAQ Accordion widget.
Hovering Image Stack
Stacked images that shift on hover so a set of shots reads as one object.
Image Comparison
A before/after slider. Two images, one divider the visitor drags.
Image Hover Box
An image tile that reveals title, text, or a link on hover — for services and portfolios.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Slider/Carousel after you activate it.