Business · Gutenberg
Team Slider block for WordPress
Team members in an interactive carousel. Each member has avatar, name, role, bio, social links, and department tag.
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
Team members in an interactive carousel. Each member has avatar, name, role, bio, social links, and department tag.
Inspector panels on this block: Slider Settings, Card Content, Header & Spacing. Those titles come from index.js, not from a shared template.
Behavior controls: “Card Style” options: Default (card), Minimal (no border), Centered (avatar top-center), Horizontal (avatar left).
Where to find it
Gutenberg inserter → Business → search “Team Slider” (block name `blockenberg/team-slider` in block.json). Style it in the sidebar after insert.
How to use Team Slider block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Team Slider”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Slider Settings. Set “Cards Visible”, “Show Navigation Arrows”, “Show Dots”, “Autoplay”.
- 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 |
|---|---|
| Cards Visible | Numeric range control in the inspector. Range 1–4. block.json default: 3. Saved as `perView`. |
| Show Navigation 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`. |
| Autoplay | On/off toggle in the inspector. Off by default. Saved as `autoplay`. |
| Autoplay Delay (ms) | Numeric range control in the inspector. Range 1000–10000. block.json default: 4000. Saved as `autoplayDelay`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Default (card); Minimal (no border); Centered (avatar top-center); Horizontal (avatar left). block.json default: default. Saved as `cardStyle`. |
| Show Bio | On/off toggle in the inspector. On by default. Saved as `showBio`. |
| Show Social Links | On/off toggle in the inspector. On by default. Saved as `showSocials`. |
| Show Department Tag | On/off toggle in the inspector. On by default. Saved as `showTag`. |
| Avatar Size (px) | Numeric range control in the inspector. Range 40–160. block.json default: 80. Saved as `avatarSize`. |
| Avatar Radius % | Numeric range control in the inspector. Range 0–50. block.json default: 50. Saved as `avatarRadius`. |
| Card Radius | Numeric range control in the inspector. Range 0–30. block.json default: 12. Saved as `cardRadius`. |
| Show Section Heading | On/off toggle in the inspector. Off by default. Saved as `showHeading`. |
| Heading | Text field in the inspector. Saved as `heading`. |
| Padding Top | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingBottom`. |
| Section Background | Color control in the inspector. Saved as `bgColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorder`. |
| Name | Color control in the inspector. block.json default: #111827. Saved as `nameColor`. |
| Role | Color control in the inspector. block.json default: #6366f1. Saved as `roleColor`. |
| Bio | Color control in the inspector. block.json default: #6b7280. Saved as `bioColor`. |
| Tag Background | Color control in the inspector. block.json default: #ede9fe. Saved as `tagBg`. |
| Tag Text | Color control in the inspector. block.json default: #6366f1. Saved as `tagColor`. |
| Social Icons | Color control in the inspector. block.json default: #6b7280. Saved as `socialColor`. |
| Dot | Color control in the inspector. block.json default: #d1d5db. Saved as `dotColor`. |
| Dot Active | Color control in the inspector. block.json default: #6366f1. Saved as `dotActive`. |
| Arrow Background | Color control in the inspector. block.json default: #ffffff. Saved as `arrowBg`. |
| Arrow Icon | Color control in the inspector. block.json default: #374151. Saved as `arrowColor`. |
| Heading Font Size (px) | Numeric range control in the inspector. Range 18–60. block.json default: 28. Saved as `headingFontSize`. |
| Role Font Size (px) | Numeric range control in the inspector. Range 10–24. block.json default: 13. Saved as `roleFontSize`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Team members in an interactive carousel. Each member has avatar, name, role, bio, social links, and department tag — that is the job of Team Slider, not a generic content block.
- Use it when you need the editor control labeled “Cards Visible”, which exists on this block’s inspector.
- It matches pages about team, slider, carousel.
- Inserter grouping: company, service, and operations pages.
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 Team Slider block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Team Slider”. It sits under Business. After insert, open Slider Settings and set “Cards Visible”, “Show Navigation Arrows”, “Show Dots”, “Autoplay”.
What makes Team Slider different from other Blockenberg blocks?
Team members in an interactive carousel. Each member has avatar, name, role, bio, social links, and department tag. Inspector labels on this block include “Cards Visible”, “Show Navigation Arrows”, “Show Dots”, “Autoplay”.
Is the Team Slider Gutenberg block free?
Yes. Team Slider ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Team 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: Slider Settings, Card Content, Header & Spacing).
Related business blocks
Team Members
Show your team members with photos, roles, bios, and social links.
Team Card
Standalone team member card with photo, name, role, bio, skills, and social links.
About Section
Ready-made About Us section with split image/video + text layout, optional company stats row, badge label, CTA buttons, and full background/color controls.
Author Profile
Extended author bio card with avatar, name, role, bio, stats, and social links.
Avatar Group
Overlapping stack of user or team avatars with an optional +X counter bubble.
Bio Card
Rich individual profile card with photo, name, role, bio text, skill tags, social links, availability badge, and CTA button.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Team Slider from the Gutenberg inserter.