Contact Carousel

Contact Carousel

This framer code component is a deep customizable Contact Carousel for presenting people or places as a series of cards. Each card holds an image, title, subtitle, tags, two text fields and a set of contact actions. Visitors move between cards with buttons, a menu overlay, arrow keys or swipe.

Suitable for team pages, office locations and partner directories.

Content

Per section: button label, image, title, subtitle, tags, Text 1, Text 2, filter values and any number of actions. Text fields support bold, italic and line breaks.

Actions

Each card carries its own contact buttons, each with an icon, label and link. One person can have phone and SMS, another email, WhatsApp and Telegram. Links accept tel:, sms:, mailto: or a normal URL; leave it empty for a button without a link.

Layout

The image sits left, right or above the text, with its own column width. Its height follows the aspect ratio, a fixed value, or the text beside it.

Navigation

Previous, next and menu buttons with an optional progress bar, plus a menu overlay listing all sections.

Lightbox

Opens the image full screen, with close button, backdrop, separate opening and closing transitions and optional scroll locking. Can be switched off.

Filter

Show all sections or only selected ones. Matching is case-insensitive and accepts several values, so one component can serve different pages.

Autoplay

Moves through the cards on its own. Pauses on hover, on hidden tabs, when scrolled out of view, and for a set delay after any manual step.

Accessibility

Semantic HTML, ARIA labels, screen-reader announcements, focus handling in the lightbox, keyboard navigation and reduced-motion support.

Styling

Sixteen property groups covering fonts, colours, borders, shadows, radii, padding, spacing, alignment, hover effects, image sizing and visibility switches, through Framer's native controls.

Notes

One .tsx file. Uses Framer's animation library and Phosphor Icons.

Questions and feedback via the Framer Community.