Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Team Carousel — Free Website Section Template
Team · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Team Carousel — Free Draggable Team Slider Template
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
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading and people in the panel. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match 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.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save 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
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. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.