Effects · Gutenberg
Card Carousel block for WordPress
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Inspector panels on this block: Cards (, Layout & Columns, Navigation & Autoplay, Card Content. Those titles come from index.js, not from a shared template.
Behavior controls: “Card Layout” options: Stacked (Image top), Overlay (Image bg), Horizontal, Text only; “Image Aspect Ratio” options: 1:1 Square, 4:3, 3:2, 16:9, 21:9; “Card Shadow” options: None, Small, Medium, Large; “Link Style” options: Arrow link →, Button, Underline.
Where to find it
Gutenberg inserter → Effects → search “Card Carousel” (block name `blockenberg/card-carousel` in block.json). Style it in the sidebar after insert.
How to use Card Carousel block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Card Carousel”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Cards (. Set “Eyebrow”, “Heading”, “Description”, “Badge”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Eyebrow | Text field in the inspector. Saved as `items`. |
| Heading | Text field in the inspector. Saved as `items`. |
| Description | Text field in the inspector. Saved as `items`. |
| Badge | Text field in the inspector. Saved as `items`. |
| Link URL | Text field in the inspector. Saved as `items`. |
| Link Label | Text field in the inspector. Saved as `items`. |
| Card Layout | Select control; the chosen value is saved on the block. Options: Stacked (Image top); Overlay (Image bg); Horizontal; Text only. block.json default: stacked. Saved as `cardLayout`. |
| Image Aspect Ratio | Select control; the chosen value is saved on the block. Options: 1:1 Square; 4:3; 3:2; 16:9; 21:9. block.json default: 16-9. Saved as `imageAspect`. |
| Desktop Columns | Numeric range control in the inspector. Range 1–6. block.json default: 3. Saved as `desktopCols`. |
| Tablet Columns | Numeric range control in the inspector. Range 1–4. block.json default: 2. Saved as `tabletCols`. |
| Mobile Columns | Numeric range control in the inspector. Range 1–2. block.json default: 1. Saved as `mobileCols`. |
| Gap (px) | Numeric range control in the inspector. Range 0–60. block.json default: 24. Saved as `gap`. |
| Min Card Height (0 = auto) | Numeric range control in the inspector. Range 0–600. block.json default: 0. Saved as `cardMinHeight`. |
| Card Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `cardBorderRadius`. |
| Card Shadow | Select control; the chosen value is saved on the block. Options: None; Small; Medium; Large. block.json default: sm. Saved as `cardShadow`. |
| Card Inner Padding (px) | Numeric range control in the inspector. Range 8–48. block.json default: 20. Saved as `cardPadding`. |
| Outer Padding (px) | Numeric range control in the inspector. Range 0–80. block.json default: 0. Saved as `padding`. |
| Show Arrows | On/off toggle in the inspector. On by default. Saved as `showArrows`. |
| Show Dots | On/off toggle in the inspector. On by default. Saved as `showDots`. |
| Loop (infinite) | On/off toggle in the inspector. On by default. Saved as `loop`. |
| Autoplay | On/off toggle in the inspector. Off by default. Saved as `autoplay`. |
| Autoplay Speed (ms) | Numeric range control in the inspector. Range 1000–10000. block.json default: 3000. Saved as `autoplaySpeed`. |
| Pause on Hover | On/off toggle in the inspector. On by default. Saved as `pauseOnHover`. |
| Show Badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Show Eyebrow | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Show Description | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Show Link | On/off toggle in the inspector. On by default. Saved as `showLink`. |
| Link Style | Select control; the chosen value is saved on the block. Options: Arrow link →; Button; Underline. block.json default: arrow. Saved as `linkStyle`. |
| Container Background | Color control in the inspector. Saved as `containerBg`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Eyebrow Color | Color control in the inspector. block.json default: #6366f1. Saved as `eyebrowColor`. |
| Heading Color | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Text Color | Color control in the inspector. block.json default: #6b7280. Saved as `textColor`. |
| Link Color | Color control in the inspector. block.json default: #6366f1. Saved as `linkColor`. |
| Badge Background | Color control in the inspector. block.json default: #ede9fe. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #6366f1. Saved as `badgeColor`. |
| Arrow Background | Color control in the inspector. block.json default: #ffffff. Saved as `arrowBg`. |
| Arrow Color | Color control in the inspector. block.json default: #111827. Saved as `arrowColor`. |
| Active Dot Color | Color control in the inspector. block.json default: #6366f1. Saved as `dotActiveColor`. |
| Inactive Dot Color | Color control in the inspector. block.json default: #d1d5db. Saved as `dotInactiveColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings — that is the job of Card Carousel, not a generic content block.
- Use it when you need the editor control labeled “Eyebrow”, which exists on this block’s inspector.
- It matches pages about carousel, slider, cards.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Card Carousel block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Card Carousel”. It sits under Effects. After insert, open Cards ( and set “Eyebrow”, “Heading”, “Description”, “Badge”.
What makes Card Carousel different from other Blockenberg blocks?
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings. Inspector labels on this block include “Eyebrow”, “Heading”, “Description”, “Badge”.
Is the Card Carousel Gutenberg block free?
Yes. Card Carousel ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Card Carousel to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Cards (, Layout & Columns, Navigation & Autoplay, Card Content).
Related effects blocks
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Marquee Cards
Infinitely scrolling row of rich cards — images, headings, tags, and links. Ideal for features, use-cases, portfolio pieces, or team showcases.
Floating Stats
A hero image composition with floating achievement/statistic cards positioned around it. Common SaaS and agency pattern for showing credibility at a glance.
Hovering Image Stack
A stack of images arranged in a fan/cascade that spreads outward on hover revealing all images.
Rotating Banner
A multi-message announcement carousel that auto-rotates between messages. Each message can have its own colors, link, and optional countdown timer.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Card Carousel from the Gutenberg inserter.