Hey everyone! I'm trying to recreate a carousel that resembles the one on the Osmo Supply website, where you can drag circular cards left and right. I'm working with Vue, Tailwind, and GSAP. My main issue is figuring out how to shape the arc and position the cards correctly. Any advice, articles, or references would be super appreciated. Thanks!
3 Answers
The design you're aiming for seems like a typical image carousel, just with some stylish flair. If you're up for it, you could use CSS Grid or Flexbox to manually code it along with some basic JavaScript for interactivity. However, if you'd like a faster route, consider using coding tools like Replit Agent. It can create interactive components super quickly based on your ideas, and you'll have the chance to learn from the generated code.
I whipped up a quick example in CodePen! You can check it out here: https://codepen.io/citizencia/pen/QwKwyro. It’s just a basic start, but might give you some ideas on how to achieve the carousel effect you're looking for. Also, after taking a closer look at the website, I think my approach is pretty similar to theirs. Let me know what you think!
Quick heads up: I noticed that some methods might not work well in certain browsers like Firefox, but they do in Chrome. Just something to keep in mind when you're developing!
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads