DraggableImage
A smooth, interactive horizontal image carousel with drag, swipe, autoplay, and dynamic skew/scale/rotate effects.
Made with Workshop
Build your own component with AI
About this Component
This React component creates a visually engaging horizontal image carousel designed for Framer and modern web apps. Users can drag or swipe to navigate images, while each item responds with subtle skew, scale, and rotation effects based on scroll speed, adding a dynamic, 3D-like experience.
Key Features:
Interactive Drag & Swipe: Smoothly scroll through images using mouse or touch gestures.
Dynamic Animations: Each image skews, rotates, and scales naturally as you drag or scroll.
Autoplay Option: Automatically scrolls images with customizable interval, pausing on user interaction.
Infinite Wrap: Images loop infinitely for continuous scrolling.
Customizable Styles: Control background color, item width, padding, border radius, shadows, and more.
Keyboard Accessibility: Navigate carousel using left/right arrow keys.
Responsive & Framer Ready: Works seamlessly in Framer projects with full property control integration.
