HorizontalScroll

A horizontal image gallery that moves in response to vertical scrolling. The container occupies extra vertical space, so as the user scrolls down, images slide horizontally across the viewport, creating an immersive portfolio or gallery experience.

Use Cases

• Portfolio or project showcases
• Product image galleries
• Team member photos
• Event or venue photo strips

Properties

items

Array of images to display horizontally. Type: array.

itemSize

small = 250px, medium = 300px, large = 400px (width and height). Type: string. Options: small, medium, large. Default: medium

scrollHeight

Total scroll height in vh (viewport heights). More height = slower scroll, smoother reveal. Type: number. Default: 300

customCss

Custom CSS property pairs. Type: string.

Best Practices

• Use 6-16 images for the best visual effect
• Use consistent image aspect ratios (square works best)
• Set scrollHeight to 300vh for a natural scroll pace
• Use high-quality images — they’re displayed prominently

Common Mistakes

Using only 2-3 images

Why it's a problem: The horizontal scroll effect is barely noticeable with few images — not enough travel distance

Fix: Use at least 6 images to fill the horizontal space

Setting scrollHeight below 200

Why it's a problem: Images scroll past too quickly to appreciate

Fix: Use 300vh (default) for a comfortable scroll pace