--- title: Team Member Carousel description: The Team Member Carousel Block shows your team as cards in a sliding row. Each card has a photo, a name, a role, a short bio and social links. Choose one of three card layouts, how many cards are in… url: "https://shapekode.com/product/shapeblock/docs/team-carousel/" updated: "2026-11-04" category: Content Block --- # Team Member Carousel The Team Member Carousel Block shows your team as cards in a sliding row. Each card has a photo, a name, a role, a short bio and social links. Choose one of three card layouts, how many cards are in view on desktop, tablet and phone, where the arrows go, and whether dots, a count or a progress bar sit under the cards. Use it for a team or about page, the doctors of a clinic, the staff of a school or restaurant, speakers at an event, a board of advisors, a "who to contact" section, or new hires on a careers page. [How to Create a Team Member Carousel in WordPress Gutenberg | ShapeBlock Pro](https://www.youtube.com/embed/pSjGlDM_0mk?feature=oembed) ## How to Add a Team Member Carousel Block Follow these steps to add and set up the Team Member Carousel Block in the Gutenberg editor. ### Step 1: Add the Team Member Carousel Block 1. Open a page or post in the WordPress Gutenberg editor. 2. Click the **+** button to open the block inserter. 3. Search for **Team Member Carousel** under ShapeBlock Pro. 4. Insert the block into your page. It starts with four sample members. 5. Select the block and change the members in the sidebar. ![Team Member Carousel block in the block inserter](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-team-carousel-1.webp) ### Step 2: Configure the Team Member Carousel Block Select the Team Member Carousel Block and open its settings in the right-hand sidebar. The available tabs are: - **Settings:** Add, edit and order the members, and set how the carousel moves, the arrows and the pagination. - **Layout:** Choose the card layout, the alignment, the name tag, what each card shows and the photo shape. - **Style:** Style the cards, photos, names, roles, bios, social icons, arrows and pagination. - **Advanced:** Set the spacing, position and background of the whole block. ![Team Member Carousel block selected in the editor, with the Team Members panel open in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-team-carousel-2.webp) ## Settings Tab The Settings tab contains the **Team Members**, **Carousel Settings**, **Navigation Arrows** and **Pagination** panels. ![Team Member Carousel block, Settings tab with one member open](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-team-carousel-3.webp) ### 1. Team Members Each member has its own row with a small photo and the name. Click a row to open it, or click the member’s card in the block once the block is selected. - **Photo:** Click **Select Photo** to pick a photo from the Media Library. **Replace Photo** and **Remove** change it later. Without a photo the card shows a plain person icon. - **Name:** The member’s name, shown as the card title. - **Role:** A short line under the name, for example a job title or a department. - **Short Bio:** A sentence or two about the member. Line breaks you type here are kept. - **Link:** Optional. When set, the name and the photo link to it, for example a profile page or a *mailto:* address. **Open in New Tab** appears once a link is added. - **Social Links:** Pick an icon from the icon library and add its URL. **Add Social Link** adds another one, the trash button removes it. A link with no URL is not shown. - **Move, Duplicate, Remove:** Change the order of the members, copy one, or take it out. Click **Add Member** to add a new member at the end of the list. ### 2. Carousel Settings - **Cards per View:** How many cards are in view at once, from 1 to 6. The defaults are 3 on desktop, 2 on tablet and 1 on phones. Responsive settings are available. - **Space Between (px):** The space between the cards. When empty, 24px. Responsive settings are available. - **Autoplay:** Moves to the next card by itself. With it on, **Autoplay Delay (ms)** sets the time between moves (4000 is four seconds) and **Pause on Hover** stops it while the pointer is over the cards. - **Speed (ms):** How long one slide takes. The default is 700. - **Loop:** After the last member, the carousel starts again from the first. With fewer members than the carousel needs to loop, the members are shown again (the copies are hidden from screen readers), and the dots and the count still show the real number of members. With Loop off, the arrows fade out at the first and last card. ### 3. Navigation Arrows - **Show Arrows:** Shows the previous and next arrows. - **Arrow Position:** **Sides** puts one arrow on each side of the cards. **Top Left** and **Top Right** put both arrows together above the cards. **Bottom Left**, **Bottom Center** and **Bottom Right** put them below the cards, next to the pagination. - **Hide on Mobile:** Hides the arrows on phones, where visitors can swipe instead. **Note:** On a phone, side arrows move under the cards, so the cards keep the full width. ### 4. Pagination - **Pagination:** **None**, **Bullets** (one dot per member, the active one wider), **Fraction** (a count such as *2 / 8*) or **Progress Bar** (a thin bar that fills as visitors move through the members). - **Hide on Mobile:** Hides the pagination on phones. ## Layout Tab ![Team Member Carousel block, Layout tab](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-team-carousel-4.webp) - **Card Layout:** **Classic** puts the photo on top and the text below it. **Overlay** puts the name and role over the bottom of the photo; the bio and social links come up when visitors hover the card (on touch screens they are always shown). **Round** shows a round photo with the text centred below it. - **Content Alignment:** Aligns the text, the social links and, on the Round layout, the photo to the left, centre or right. - **Name Tag:** The HTML tag for the names: H2 to H6, P or DIV. The default is H3. - **Show Bio:** Shows or hides the short bio on every card. - **Show Social Links:** Shows or hides the social links on every card. - **Photo Shape:** The shape the photos are cropped to: Square (1:1), Portrait (4:5), Tall (3:4), Landscape (4:3) or Wide (16:9). The default is square, or tall on the Overlay layout. The Round layout always uses a circle, so this option is not shown there. - **Image Size:** Which size of the image file is loaded. The photo fills its space whichever size you choose, so pick a smaller one for small cards to keep the page light. ## Style Tab The Style tab contains the **Card**, **Photo**, **Name**, **Role**, **Bio**, **Social Icons**, **Navigation Arrows** and **Pagination** panels. Panels for parts that are turned off (bio, social links, arrows, pagination) are hidden. ![Team Member Carousel block, Style tab with all panels open](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-team-carousel-5.webp) ### 1. Card - **Background:** A color or gradient behind each card. Make it transparent for cards without a box. - **Border:** The style, width and color of the card outline. - **Shadow:** A shadow under each card, with its own setting on hover. - **Hover Effect:** On the Hover tab: **Lift** raises the card a little when visitors hover it, **None** keeps it still. - **Padding:** The space inside each card. Responsive settings are available. - **Border Radius:** Round the card corners. ### 2. Photo - **Photo Size (px):** The size of the round photo, on the Round layout. When empty, 132px. Responsive settings are available. - **Border Radius:** Round the corners of the photos. - **Overlay:** On the Overlay layout, the color or gradient behind the name and role. Use a darker one on light photos so the text stays easy to read. - **Zoom on Hover:** Zooms the photo in slightly when visitors hover the card. ### 3. Name, Role and Bio - **Color:** The text color. - **Typography:** Customize the font family, size, weight, style, text transform, line height and letter spacing. Responsive settings are available for desktop, tablet and mobile. ### 4. Social Icons - **Icon Color and Background:** The colors of the icons and their buttons, with their own settings on the Hover tab. - **Icon Size (px):** The size of the icons. When empty, 15px. - **Button Size (px):** The size of the button around each icon. When empty, 34px. - **Gap (px):** The space between the icons. When empty, 8px. - **Border Radius:** Round the buttons. When empty, they are circles. ### 5. Navigation Arrows - **Icon Color and Background:** The colors of the arrows, with their own settings on the Hover tab. - **Size (px):** The size of the arrow buttons. When empty, 44px. - **Border Radius:** Round the arrow buttons. When empty, they are circles. ### 6. Pagination - **Color and Active Color:** The color of the dots, the count or the progress bar track, and of the active dot, the current number or the filled bar. - **Dot Size, Active Dot Width and Gap (px):** For bullets: the size of the dots, the width of the active one (wider than the others makes a pill) and the space between them. ## Advanced Tab ![Team Member Carousel block, Advanced tab](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-team-carousel-6.webp) The Advanced tab has the same panels as on every ShapeBlock block: **Spacing** (padding and margin per device), **Position** (place the carousel with Absolute or Fixed, with offsets, width and z-index), and **Background** (a color or gradient behind the whole block). They are explained in [Advanced Tab: Spacing, Position and Background](https://shapekode.com/product/shapeblock/docs/advanced-tab/). ### Tips - Use photos of the same kind for every member: the same crop, a similar background and light. Mixed photos make a carousel look unfinished. - Keep bios to one or two sentences, so the cards in a row stay about the same height. - For a "who to contact" section, add a *mailto:* link to each member and an envelope or phone icon as a social link. - For a strip of small faces, such as advisors or partners, use the Round layout with a small photo size, turn off the bio, the social links, the arrows and the pagination, and turn on Autoplay. - Beside a short heading or intro in a second column, make that column sticky in its Row, so it stays in view next to the cards. **Live demo:** see the Team Member Carousel Block in action on the [Team Member Carousel demo page](https://shapekode.com/product/shapeblock/team-carousel/).