Loop Slide Gallery

About this Component

Create a smooth, infinitely scrolling horizontal gallery. Content flows seamlessly with drag and wheel interactions, wrapping around in a continuous loop. Supports uploaded images with labels or Framer canvas elements with auto-measured dimensions.

How It Works

Cards scroll horizontally across the viewport. Drag or scroll to navigate—the gallery responds with smooth easing. When cards exit one edge, they reappear on the other for true infinite looping. No external libraries; pure CSS transforms keep it lightweight and performant.

Two Content Modes

Images mode — Upload images directly, set dimensions, and add optional text labels below each slide.

Canvas mode — Connect any Framer component or CMS collection. Dimensions auto-measure from your content—no manual sizing needed.

Visual Customization

Slide dimensions — Set width and height (default 300×200px)

Gap spacing — Control spacing between cards (0–100px)

Image fit — Cover, contain, or fill

Border radius — Round corners on slides (0–100px)

Scroll speed — Adjust drag/wheel sensitivity (0.1–5x)

Labels — Toggle visibility, customize font, color, and spacing

Edge Effects

Edge blur — Blur overlays at viewport edges for depth (0–40px)

Edge fade — Fade cards to transparent at edges with adjustable width and opacity

Key Features

Infinite loop — Seamless wrapping for continuous scrolling

Drag & wheel support — Intuitive navigation on all devices

Smooth easing — Fluid motion with no snapping

Auto-measure — Canvas mode detects component dimensions automatically

CMS compatible — Connect collections directly in canvas mode

Lightweight — No external dependencies; pure CSS transforms

Responsive — Adapts to any container size

Customization

Adjust everything through property controls: slide dimensions, gap, border radius, scroll speed, image fit, label styling, and edge effects. Switch between image and canvas modes with a toggle. No coding required.

Best For

Portfolios, product catalogs, client logos, testimonial carousels, team photos, image galleries, feature showcases, landing pages, e-commerce sites, or anywhere you need smooth horizontal scrolling with infinite looping.