webdevpuneet.com

Team Carousel

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

4 sectionsView all →
Team

Team Carousel

Responsive · Animated
Team

Team Grid

Responsive · Animated
Team

Interactive Team Accordion

Responsive · Animated
Team

Team With Hiring CTA

Responsive · Animated

Team Carousel — Free Website Section Template

Team · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryTeam
Tagsteamcarouselsliderdraggableportraitsaboutdark
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Tall portrait cards with name and role over a gradient
Drag with momentum and snap (GSAP Draggable + Inertia)
Arrow buttons with eased scrolling; disabled at the ends
Native swipe and scroll-snap on touch; works without JS
Up to 16 people, with optional profile links
Labelled, focusable row and editable arrow labels
Dark theme with a bright accent
Export HTML, a ZIP, React or Vue

About this section

Team Carousel — Free Draggable Team Slider Template

Team Carousel: A team section with personality: tall portrait cards in a horizontal row, each with the person’s name and role over a soft gradient at the bottom of the photo. Drag it with the mouse (GSAP Draggable + Inertia), swipe on touch screens, or use the arrow buttons beside the heading.

Team Carousel shows your people as tall portrait cards in a row you can drag, swipe or step through. Each card has a full-bleed photo with the person's name and role over a soft gradient, and a heading with round arrow buttons sits above the row. It suits creative teams, studios and larger teams that don't fit one grid row.

Drag with momentum

On desktop, drag the row with the mouse and it glides and snaps to the nearest card (GSAP Draggable on a proxy plus InertiaPlugin); the arrows ease from card to card with ScrollToPlugin and disable at the ends. On phones it's native swiping with scroll-snap, and without JavaScript it's still a scrollable row.

Up to sixteen people

Add, reorder and remove people, upload portrait photos (cropped to tall 3:4 cards), and optionally link each name to a profile page. The dark theme with a yellow accent is easy to restyle with presets or your brand kit.

Accessible and animated

The row is a labelled, focusable region and the arrows have screen-reader labels you can edit. The heading reveals with SplitText and the cards stagger in on scroll.

Export it

Download HTML, a ZIP, React or Vue with the carousel script, or fork into My Code. For a static layout, see the Team Grid.

Why use it

Why Use the Team Carousel

⇆
Fits bigger teams
A scrolling row shows many people without a long grid pushing the page down.
🖼
Portrait-first
Tall, full-bleed photos give each person presence, ideal for creative teams.
✋
Fun to explore
Momentum dragging invites visitors to browse the whole team.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading and people in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🎨
Studio or agency
Showcase the creative team with striking portraits and link each name to a personal profile or portfolio.
🎤
Conference speakers
Use it as a speaker line-up with names and talk topics in the role line.
🎓
Instructors or coaches
Present mentors in a row that visitors can swipe through on their phones.
🏢
Leadership team
Show department heads with their titles, linking to longer bios.

In real websites

Website Templates That Use the Team Carousel Section

The Team Carousel section is part of 2 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Creative Agency Website, Event & Conference Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

On devices with a mouse, GSAP Draggable tracks an invisible proxy and moves the row’s native scroll position, with InertiaPlugin momentum and snapping to cards. Touch devices use normal swiping with CSS scroll-snap.

Portrait photos; cards are cropped to 3:4. Faces near the top or centre of the image work best because the name sits over the bottom.

Yes. Add a profile link to a person and their name becomes a link; leave it empty for plain text.

Yes. The cards sit in a horizontally scrollable row, so visitors can still scroll through them.

It saves an editable copy of your Team Carousel in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.