Content · Elementor

Advanced Card Carousel widget for Elementor

A carousel of cards you fill yourself (image, text, button) — not a post query.

Open live demo

Get King Addons

This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.

Get King Addons

What it actually does

A carousel of cards you fill yourself (image, text, button) — not a post query.

How to add it in Elementor

  1. Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
  2. Edit with Elementor. Open a page and click Edit with Elementor.
  3. Insert the widget. Search the panel for “Advanced Card Carousel”. Typing “king” lists every King Addons widget.
  4. Set inspector controls from this widget’s PHP. Configure “Loop Cards”, “Rewind Cards”, “Autoplay Carousel Cards”, “Delay between transitions (ms)”. Style and Content tabs are listed on this page.

When to use it

Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Advanced Card Carousel.

Inspector controls from this widget’s PHP

ControlWhat the code does
Carousel Settings — Loop CardsWhen this switch is on, render() outputs Swiper loop (last slide wraps to the first).
Carousel Settings — Rewind CardsWhen 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 — Autoplay Carousel CardsWhen 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 interactionAutoplay will be disabled after user interactions (swipes), it will not be restarted every time after interaction.
Carousel Settings — Pause on mouse enterWhen enabled autoplay will be paused on pointer (mouse) enter over carousel container.
Carousel Settings — Reverse DirectionEnables 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).
kng_card_carousel_content_items — ImageMedia Library attachment(s); render() uses the URL/ID as the image source.
kng_card_carousel_content_items — Image SizeElementor image-size group (thumbnail, medium, large, full, custom).
kng_card_carousel_content_items — Image LinkElementor URL control (href, new tab, nofollow) applied to a front-end link.
kng_card_carousel_content_items — Image DescriptionThe text below the image.
kng_card_carousel_content_items — Text ColorWrites CSS `color` onto the widget’s front-end markup.
kng_card_carousel_content_items — Whole card linkElementor URL control (href, new tab, nofollow) applied to a front-end link.
kng_card_carousel_content_items — BackgroundElementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-card-carousel-card-inner`.
kng_card_carousel_content_items — TitleText inspector control (`kng_card_carousel_title`).
kng_card_carousel_content_items — SubtitleText inspector control (`kng_card_carousel_subtitle`).
kng_card_carousel_content_items — Button TextText inspector control (`kng_card_carousel_btn_text`).
kng_card_carousel_content_items — LinkElementor URL control (href, new tab, nofollow) applied to a front-end link.
kng_card_carousel_content_items — DescriptionWysiwyg inspector control (`kng_card_carousel_description`).
Cards — Kng Card Carousel Content ItemsRepeater rows; render() loops each item to build the list or slides.
Disable Card Items — Disable ImageWhen this switch is on, render() skips the wrapped markup.
Disable Card Items — Disable Image DescriptionWhen this switch is on, render() skips the post excerpt.
Disable Card Items — Disable TitleWhen this switch is on, render() skips the wrapped markup.
Disable Card Items — Disable SubtitleWhen this switch is on, render() skips the wrapped markup.
Disable Card Items — Disable DescriptionWhen this switch is on, render() skips the post excerpt.
Disable Card Items — Disable whole image containerImage container includes image and image description.
Disable Card Items — Disable whole text containerText container includes title, subtitle, description and button.
Card Layout — Make card full heightWrites CSS `height` onto the widget’s front-end markup. Options: No; Yes.
Card Layout — Align Whole CardWrites CSS `align-self` onto the widget’s front-end markup. Options: Default; Start; Center; End.
Card Layout — Align Card ContentWrites CSS `justify-content` onto the widget’s front-end markup. Options: Default; Start; Center; End.
Card Layout — PositionWrites CSS `flex-flow` onto the widget’s front-end markup. Options: Left; Top; Bottom; Right.
Card Layout — WidthOptions: Auto; Custom (%).
Card Layout — Custom width (%)Writes CSS `width` onto the widget’s front-end markup. (default 100, min 0, max 100).
Card Layout — HeightWrites 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 ContentWrites CSS (justify-content, align-items, align-self) onto the widget’s front-end markup. Options: Default; Start; Center; End.
Card Layout — Width (Kng Card Carousel Cards Text Container Width Type)Options: Auto; Custom (%).
Card Layout — Custom width (%) (Kng Card Carousel Cards Text Container Width)Writes CSS `width` onto the widget’s front-end markup. (default 100, min 0, max 100).
Card Layout — Align Content (Kng Card Carousel 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 viewThe 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 Card Carousel Tablet Cards Per View)Swiper `spaceBetween` in pixels (default 3.0, min 1).
Responsive Settings — Space between cards (px) (Kng Card Carousel 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 Card Carousel Mobile Cards Per View)Swiper `spaceBetween` in pixels (default 1.0, min 1).
Responsive Settings — Space between cards (px) (Kng Card Carousel Mobile Space Between Cards)Numeric value used in this widget’s render/JS (default 30, min 0).
Responsive Settings — Breakpoint (px) (Kng Card Carousel Mobile Breakpoint)Swiper `slidesPerView` — slides visible at once (default 767, min 1).
Navigation — Enable navigationWhen this switch is on, render() outputs prev/next carousel arrows.
Navigation — Display on different screen sizesWrites CSS `display` onto the widget’s front-end markup. Options: Show; Hide.
Pagination — Enable paginationWhen this switch is on, render() outputs Swiper dynamic pagination bullets.
Pagination — TypeSwiper `pagination.type` on the front end. Options: Bullets; Progress Bar; Fraction.
Pagination — Progress bar positionCheck margin settings to properly set the position of the progress bar.
Pagination — Clickable BulletsSwitcher inspector control (`kng_card_carousel_pag_clickable_switcher`).
Pagination — Dynamic BulletsGood 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 BulletsThe number of main bullets visible when Dynamic Bullets enabled.
Pagination — Display on different screen sizesWrites CSS `display` onto the widget’s front-end markup. Options: Show; Hide.
Image — HeightOptions: Auto; Custom (px); Custom (%).
Image — WidthOptions: Auto; Width (%); Maximum Width (px).
Image — Maximum Width (px)Writes CSS `max-width` onto the widget’s front-end markup. (default 200, min 0).
Image — Width (%)Writes CSS `width` onto the widget’s front-end markup. (default 100, min 0, max 100).
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 FitWrites CSS `object-fit` onto the widget’s front-end markup. Options: Cover; Contain.
Image — Image Fit PositionWrites CSS `object-position` onto the widget’s front-end markup. Options: Top; Bottom; Left; Right; Center.
Image — Background ColorWrites CSS `background-color` onto the widget’s front-end markup.
Image — CSS FilterCSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-card-carousel-image img`.
Image — CSS Filter for image on card hoverCSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-card-carousel-card:hover .king-addons-card-carousel-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 hoverSwitcher inspector control (`kng_card_carousel_image_scale_switcher`).
Image — Scale on hoverWrites CSS (king-addons-card-carousel-card, transform) onto the widget’s front-end markup. (default 1.3, min 0).
Image — PaddingWrites CSS `padding` onto the widget’s front-end markup.
Image — MarginWrites CSS `margin` onto the widget’s front-end markup.
Image — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-image`.
Image — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-image`.
Image — Border RadiusWrites CSS `border-radius` onto the widget’s front-end markup.
Image Description — TypographyElementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-carousel-imagedescription`.
Image Description — Text ColorWrites CSS `color` onto the widget’s front-end markup.
Image Description — Background ColorWrites CSS `background-color` onto the widget’s front-end markup.
Image Description — Text AlignWrites CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right.
Image Description — PaddingWrites CSS `padding` onto the widget’s front-end markup.
Image Description — MarginWrites CSS `margin` onto the widget’s front-end markup.
Image Description — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-imagedescription`.
Image Description — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-imagedescription`.
Image Description — Border RadiusWrites CSS `border-radius` onto the widget’s front-end markup.
Title — TypographyElementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-carousel-title`.
Title — Text ColorWrites CSS `color` onto the widget’s front-end markup.
Title — Background ColorWrites CSS `background-color` onto the widget’s front-end markup.
Title — Text AlignWrites CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right.
Title — PaddingWrites CSS `padding` onto the widget’s front-end markup.
Title — MarginWrites CSS `margin` onto the widget’s front-end markup.
Title — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-title`.
Title — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-title`.
Title — Border RadiusWrites CSS `border-radius` onto the widget’s front-end markup.
Subtitle — TypographyElementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-carousel-subtitle`.
Subtitle — Text ColorWrites CSS `color` onto the widget’s front-end markup.
Subtitle — Background ColorWrites CSS `background-color` onto the widget’s front-end markup.
Subtitle — Text AlignWrites CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right.
Subtitle — PaddingWrites CSS `padding` onto the widget’s front-end markup.
Subtitle — MarginWrites CSS `margin` onto the widget’s front-end markup.
Subtitle — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-subtitle`.
Subtitle — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-subtitle`.
Subtitle — Border RadiusWrites CSS `border-radius` onto the widget’s front-end markup.
Description — TypographyElementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-carousel-description`.
Description — Text ColorWrites CSS `color` onto the widget’s front-end markup.
Description — Background ColorWrites CSS `background-color` onto the widget’s front-end markup.
Description — Text AlignWrites CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right.
Description — PaddingWrites CSS `padding` onto the widget’s front-end markup.
Description — MarginWrites CSS `margin` onto the widget’s front-end markup.
Description — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-description`.
Description — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-description`.
Description — Border RadiusWrites CSS `border-radius` onto the widget’s front-end markup.
Button — Button Horizontal PositionWrites CSS `align-items` onto the widget’s front-end markup. Options: Left; Center; Right.
Button — Button Text AlignWrites CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right.
Button — WidthOptions: Auto; Custom.
Button — Width (%)Writes CSS `width` onto the widget’s front-end markup. (default 100, min 0, max 100).
Button — Margin (px)Writes CSS `margin` onto the widget’s front-end markup.
Button (Normal) — TypographyElementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-carousel-btn`.
Button (Normal) — Text ColorWrites CSS `color` onto the widget’s front-end markup.
Button (Normal) — Background ColorWrites CSS `background-color` onto the widget’s front-end markup.
Button (Normal) — Padding (px)Writes CSS `padding` onto the widget’s front-end markup.
Button (Normal) — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-btn`.
Button (Normal) — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-btn`.
Button (Normal) — Border RadiusWrites CSS `border-radius` onto the widget’s front-end markup.
Button (Hover) — TypographyElementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-carousel-btn:hover`.
Button (Hover) — Text ColorWrites CSS (king-addons-card-carousel-btn, color) onto the widget’s front-end markup.
Button (Hover) — Background ColorWrites CSS (king-addons-card-carousel-btn, background-color) onto the widget’s front-end markup.
Button (Hover) — PaddingWrites CSS (king-addons-card-carousel-btn, padding) onto the widget’s front-end markup.
Button (Hover) — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-btn:hover`.
Button (Hover) — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-btn:hover`.
Button (Hover) — Border RadiusWrites CSS (king-addons-card-carousel-btn, border-radius) onto the widget’s front-end markup.
Navigation — IconIcon rendered with Elementor Icons_Manager in this widget’s HTML.
Navigation — MarginWrites CSS `margin` onto the widget’s front-end markup.
Navigation — Scale on hover (%)Writes CSS (king-addons-card-carousel-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 Card Carousel Nav Icon Next)Icon rendered with Elementor Icons_Manager in this widget’s HTML.
Navigation — Margin (Kng Card Carousel Nav Margin Next)Writes CSS `margin` onto the widget’s front-end markup.
Navigation — Scale on hover (%) (Kng Card Carousel Nav Next Transform Scale)Writes CSS (king-addons-card-carousel-nav-next, transform) onto the widget’s front-end markup. (default 1.3, min 0).
Navigation — Vertical position (%) (Kng Card Carousel Nav Position V Next)Writes CSS `top` onto the widget’s front-end markup. (min 0, max 100).
Navigation — Horizontal position (%) (Kng Card Carousel Nav Position H Next)Writes CSS `right` onto the widget’s front-end markup. (min 0, max 100).
Navigation — Icon SizeWrites 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 — PaddingWrites CSS `padding` onto the widget’s front-end markup.
Navigation (Normal) — ColorWrites CSS (color, fill) onto the widget’s front-end markup.
Navigation (Normal) — Background ColorWrites CSS `background-color` onto the widget’s front-end markup.
Navigation (Normal) — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-nav-inner`.
Navigation (Normal) — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-nav-inner`.
Navigation (Normal) — Border RadiusWrites CSS `border-radius` onto the widget’s front-end markup.
Navigation (Hover) — ColorWrites CSS (i, color, svg, fill) onto the widget’s front-end markup.
Navigation (Hover) — Background ColorWrites CSS (king-addons-card-carousel-nav-inner, background-color) onto the widget’s front-end markup.
Navigation (Hover) — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-nav-inner:hover`.
Navigation (Hover) — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-nav-inner:hover`.
Navigation (Hover) — Border RadiusWrites CSS (king-addons-card-carousel-nav-inner, border-radius) onto the widget’s front-end markup.
Pagination — ColorColor written to this widget’s CSS selector.
Pagination — Second ColorColor written to this widget’s CSS selector.
Pagination — SizeNumeric control (default 8, min 0).
Pagination — Bullets gapNumeric control (default 4, min 0).
Pagination — Size (Kng Card Carousel Pag Progressbar Size)Numeric control (default 4, min 0).
Pagination — TypographyElementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-card-carousel-pagination.swiper-pagination-fraction`.
Whole Carousel — BackgroundElementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-items`.
Whole Carousel — Whole carousel marginWrites CSS `margin` onto the widget’s front-end markup.
Whole Carousel — Cards wrapper marginWrites CSS `margin` onto the widget’s front-end markup.
Whole Carousel — PaddingWrites CSS `padding` onto the widget’s front-end markup.
Whole Carousel — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-items`.
Whole Carousel — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-items`.
Whole Carousel — Border RadiusWrites 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) — BackgroundElementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-card-inner`.
Whole Card (Normal) — PaddingWrites CSS `padding` onto the widget’s front-end markup.
Whole Card (Normal) — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-card-inner`.
Whole Card (Normal) — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-card-inner`.
Whole Card (Normal) — Border RadiusWrites CSS `border-radius` onto the widget’s front-end markup.
Whole Card (Hover) — BackgroundElementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-card-inner:hover`.
Whole Card (Hover) — PaddingWrites CSS (king-addons-card-carousel-card-inner, padding) onto the widget’s front-end markup.
Whole Card (Hover) — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-card-inner:hover`.
Whole Card (Hover) — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-card-inner:hover`.
Whole Card (Hover) — Border RadiusWrites CSS (king-addons-card-carousel-card-inner, border-radius) onto the widget’s front-end markup.
Whole Image Container — Background ColorWrites CSS `background-color` onto the widget’s front-end markup.
Whole Image Container — PaddingWrites CSS `padding` onto the widget’s front-end markup.
Whole Image Container — MarginWrites CSS `margin` onto the widget’s front-end markup.
Whole Image Container — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-card-container-1`.
Whole Image Container — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-card-container-1`.
Whole Image Container — Border RadiusWrites CSS `border-radius` onto the widget’s front-end markup.
Whole Text Container — Background ColorWrites CSS `background-color` onto the widget’s front-end markup.
Whole Text Container — PaddingWrites CSS `padding` onto the widget’s front-end markup.
Whole Text Container — MarginWrites CSS `margin` onto the widget’s front-end markup.
Whole Text Container — Box ShadowElementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-card-carousel-card-container-2`.
Whole Text Container — BorderElementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-card-carousel-card-container-2`.
Whole Text Container — Border RadiusWrites 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 Card Carousel actually change on the page?

A carousel of cards you fill yourself (image, text, button) — not a post query. Inspector labels from this widget’s PHP include “Loop Cards”, “Rewind Cards”, “Autoplay Carousel Cards”, “Delay between transitions (ms)”.

How do I add Advanced Card Carousel in Elementor?

Install King Addons and Elementor, edit a page, search the panel for “Advanced Card 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

Get King Addons

One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Advanced Card Carousel after you activate it.

Get King Addons