Effects · Gutenberg
Card Deck Slider block for WordPress
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
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
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Inspector panels on this block: Cards, Layout & Deck Style, Content Display, Animation & Controls. Those titles come from index.js, not from a shared template.
Behavior controls: “Deck Style” options: Fan (rotated arc), Stack (offset depth), Cascade (angled left); “Image Fit” options: Cover, Contain.
Where to find it
Gutenberg inserter → Effects → search “Card Deck Slider” (block name `blockenberg/card-deck-slider` in block.json). Style it in the sidebar after insert.
How to use Card Deck Slider block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Card Deck Slider”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Cards. Set “Tag / Category”, “Cards — Title”, “Description”, “Link URL”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Tag / Category | Text field in the inspector. |
| Cards — Title | Text field in the inspector. |
| Description | Multiline text field in the inspector. |
| Link URL | Text field in the inspector. |
| Link Label | Text field in the inspector. |
| Deck Style | Select control; the chosen value is saved on the block. Options: Fan (rotated arc); Stack (offset depth); Cascade (angled left). block.json default: fan. Saved as `deckStyle`. |
| Card Width (px) | Numeric range control in the inspector. Range 200–600. block.json default: 360. Saved as `cardWidth`. |
| Card Height (px) | Numeric range control in the inspector. Range 200–700. block.json default: 480. Saved as `cardHeight`. |
| Corner Radius (px) | Numeric range control in the inspector. Range 0–48. block.json default: 20. Saved as `cardRadius`. |
| Stacked Cards Visible | Numeric range control in the inspector. Range 1–4. block.json default: 3. Saved as `stackCount`. |
| Stack Angle (°) | Numeric range control in the inspector. Range 0–30. block.json default: 8. Saved as `stackAngle`. |
| Stack Offset (px) | Numeric range control in the inspector. Range 0–60. block.json default: 18. Saved as `stackOffset`. |
| Image Overlay Strength (%) | Numeric range control in the inspector. Range 0–100. block.json default: 50. Saved as `overlayStrength`. |
| Image Fit | Select control; the chosen value is saved on the block. Options: Cover; Contain. block.json default: cover. Saved as `imageFit`. |
| Show Tag / Category | On/off toggle in the inspector. On by default. Saved as `showTag`. |
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| 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`. |
| 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`. |
| Auto Play | On/off toggle in the inspector. Off by default. Saved as `autoPlay`. |
| Auto Interval (ms) | Numeric range control in the inspector. Range 1000–8000. block.json default: 3500. Saved as `autoInterval`. |
| Transition Duration (ms) | Numeric range control in the inspector. Range 200–1200. block.json default: 500. Saved as `transitionDuration`. |
| Tag Size (px) | Numeric range control in the inspector. Range 9–18. block.json default: 11. Saved as `tagSize`. |
| Card Background | Color control in the inspector. block.json default: #1e293b. Saved as `cardBg`. |
| Title Color | Color control in the inspector. block.json default: #ffffff. Saved as `titleColor`. |
| Description Color | Color control in the inspector. block.json default: #94a3b8. Saved as `descColor`. |
| Tag Background | Color control in the inspector. block.json default: #6366f1. Saved as `tagBg`. |
| Tag Text | Color control in the inspector. block.json default: #ffffff. Saved as `tagColor`. |
| Link Color | Color control in the inspector. block.json default: #818cf8. Saved as `linkColor`. |
| Dot / Active Color | Color control in the inspector. block.json default: #6366f1. Saved as `dotColor`. |
| Arrow Background | Color control in the inspector. block.json default: #ffffff. Saved as `arrowBg`. |
| Arrow Icon | Color control in the inspector. block.json default: #0f172a. Saved as `arrowColor`. |
| Section Background | Color control in the inspector. Saved as `sectionBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence — that is the job of Card Deck Slider, not a generic content block.
- Use it when you need the editor control labeled “Tag / Category”, which exists on this block’s inspector.
- It matches pages about cards, deck, slider.
- 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 Deck Slider block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Card Deck Slider”. It sits under Effects. After insert, open Cards and set “Tag / Category”, “Cards — Title”, “Description”, “Link URL”.
What makes Card Deck Slider different from other Blockenberg blocks?
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence. Inspector labels on this block include “Tag / Category”, “Cards — Title”, “Description”, “Link URL”.
Is the Card Deck Slider Gutenberg block free?
Yes. Card Deck Slider ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Card Deck Slider 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 & Deck Style, Content Display, Animation & Controls).
Related effects blocks
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
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.
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Content Flip Box
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Card Deck Slider from the Gutenberg inserter.