3D Carousel-Slider Image & Video Gallery a Component for React

Product Overview

Bring your content to life with this immersive 3D carousel gallery component for React. Built using React Three Fiber, it creates a rotating cylindrical gallery that supports both images and videos—ideal for modern, interactive web experiences.

What’s Included

• A plug-and-play component featuring:
• 3D cylindrical carousel with smooth scroll and drag
• Multiple aspect ratios: 1:1, 3:2, 16:9, 9:16
• Mixed media support (images + videos)
• Auto-scaling layout based on number of items
• Interactive hover effects
• Mobile-friendly with full touch support

Key Features

Multiple Aspect Ratios

Tailor the gallery to your content:

• 1:1 – Perfect for profile pictures, Instagram-style grids
• 3:2 – Classic photography layout
• 16:9 – Best for video and cinematic media (default)
• 9:16 – Ideal for vertical/mobile-first content

Mixed Media Support

Mix images and videos in one carousel:

Smart Auto-Scaling

Automatically adapts based on the number of items:

• 1–5 items → compact
• 6–8 items → medium
• 9–12 items → large
• 13+ items → extra large

Interactive Controls

• Scroll to rotate
• Drag to spin manually
• Hover effects for depth interaction
• Full mobile gesture support

Use Cases

• Portfolios and agency websites
• E-commerce product displays
• Photo and video galleries
• Landing page hero sections
• Digital art or NFT showcases

Tech Specs

• React: v19
• 3D Engine: Three.js (v0.178) with React Three Fiber
• Animations: React Spring
• Touch/Drag: Use Gesture
• Build Tool: Vite

What You Get

• Full production-ready React component
• Responsive and mobile-optimized 3D layout
• Custom geometry for realistic curvature
• Configurable props (e.g., spacing, auto-rotate, aspect ratio)
• Example files and documentation
• ESLint config for clean code

Why Developers Love It

• No setup headaches – just import and go
• Built with modern best practices
• Runs smoothly at 60fps
• Fully responsive and mobile-first
• SSR friendly
• Works with React frameworks like Next.js

License

MIT License – Free to use in personal and commercial projects.

✨ Ready to transform your React app into a 3D visual experience? This component gets you there fast.