This is a feature-rich React carousel component designed for showcasing image galleries with professional interactions. The component offers:
Core Features:
Draggable Navigation: Smooth touch and mouse-based dragging to swipe between slides
Autoplay System: Automatic slide progression with a visual progress bar that fills before transitioning
Multiple Navigation Methods: Dot indicators, play/pause control, and swipe gestures
Responsive Design: Adapts to container width with customizable slide widths
Key Capabilities:
Displays 5 default Unsplash images or accepts custom image arrays (up to 20 images)
Configurable slide dimensions (width: 30-100%, height: 200-800px)
Adjustable autoplay timing (1-10 seconds between transitions)
Optional call-to-action button with customizable text, link, and typography
Smooth animations using CSS transitions and requestAnimationFrame
Touch-optimized for mobile devices with pan-y support
Technical Highlights:
Built with React hooks (useState, useEffect, useRef, useCallback)
Framer Motion property controls for visual editing in Framer
Proper event handling for both mouse and touch interactions
Performance-optimized with transform-based animations and will-change hints
Circular navigation that loops infinitely through slides