Horizontal Gallery
Horizontal scrolling testimonial gallery with smooth transitions.
Main Features of Horizontal Gallery
How to Use Horizontal Gallery in Next.js
Installation Guide for Horizontal Gallery
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
backgroundColor | string | #ffffff | Background color of the component (hex, rgb, or hsl). |
textColor | string | #000000 | Default text color (hex, rgb, or hsl). |
title | string | REAL STORIES | Main title text (supports newlines with \n). |
titleColor | string | #000000 | Color of the title text (hex, rgb, or hsl). |
arrowColor | string | #000000 | Color of arrow icons (hex, rgb, or hsl). |
cardBgColor | string | #f5f5f5 | Background color of the testimonial cards (hex, rgb, or hsl). |
companyBadgeBgColor | string | #ffffff | Background color of company badges (hex, rgb, or hsl). |
companyBadgeTextColor | string | #000000 | Text color of company badges (hex, rgb, or hsl). |
quoteColor | string | #000000 | Color of the quote text (hex, rgb, or hsl). |
quoteItalic | boolean | true | Whether to display quotes in italic. |
authorNameColor | string | #000000 | Color of the author name text (hex, rgb, or hsl). |
authorBorderColor | string | rgba(0,0,0,0.1) | Border color of author sections (hex, rgb, or hsl). |
ctaCircleBgColor | string | #000000 | Background color of the CTA circle (hex, rgb, or hsl). |
ctaCircleTextColor | string | #ffffff | Text color of the CTA circle (hex, rgb, or hsl). |
ctaText | string | Join the Revolution | CTA text content (supports newlines with \n). |
Related Components
When to Use
Excellent for marketing-heavy landing pages, creative agencies, and Next.js sites that want a high-impact, lateral scrolling experience. Use this React component for a horizontal gallery that moves cards along a track as the user scrolls or drags.
Best Practices
Maintain consistent spacing within your design system by using it for showcase sections that require focus on individual cards. Follow React best practices by using high-contrast arrow icons. Optimize for performance by using hardware-accelerated transforms.
Why This Component Matters in Modern UI Development
Horizontal galleries provide a curated, linear way to explore user stories. This production-ready UI component helpsคุณ build an interface that feels expansive and narrative-driven, improving user discovery of multiple testimonials.
Frequently Asked Questions
QIs it draggable?
Yes, users can navigate the gallery either by scrolling horizontally, using the provided arrow buttons, or dragging on touch devices.
QHow many cards can I include?
The component is optimized for 3-7 high-quality cards, but it can handle more as the track expands horizontally to accommodate the array.
QWhat is the CTA circle?
The gallery ends with a dedicated 'Call to Action' circle, encouraging users to join the community after reading the testimonials.