DEV Community

Ruslan Kornev
Ruslan Kornev

Posted on

3 1

Scrollable and draggable carousel

Hello, stranger. I searched the entire Internet in search of a scrollable and draggable carousel, for three days. Finally decided to create my own. Also decided to share it with you. If you know how to make it event better then let me know in the comments :)

Image description

Demo

Kudos to these original works:
https://codepen.io/toddwebdev/pen/yExKoj
https://codesandbox.io/s/framer-motion-usescroll-element-scrolling-eg6fm3

For google users
"framer motion", "carousel", "draggable", "scrollable", "progress", "typescript", "react"

Top comments (2)

Collapse
 
woto profile image
Ruslan Kornev

Thanks. I think it's very easy to do it yourself. The main point was to glue the classic example from framer motion and the functionality of the native scroll. I found some "complete components", but all they are had more or less limitations bullshit endless configuration options etc. This example opposite should be used as a boilerplate.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Cool, you should make it responsive as well so it works on mobile.

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay