Loop Slide Gallery

About this Component Create a smooth, infinitely scrolling horizontal 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.