Show HN: React/Next.js 的拖动式前后对比滑块组件
1 分•作者: doanything_ai•5 个月前
大家好，我注意到很多服务型企业都在网站上直接堆砌对比照片。我用 React/Next.js 和 Tailwind 构建了一个简单、移动端响应式的交互式拖动展示滑块，用于展示前后对比照片。
为了帮助我的副业项目启动，我正在以 10 美元的价格出售这个可直接嵌入的组件代码。
在线演示：<a href="https://project-4df6f396.doanything.app?company=Your+Business+Name&before=https%3A%2F%2Fljnung6dfgwtqv5w.public.blob.vercel-storage.com%2Fa13082dd-d939-4886-add9-ddd13f4e7eaa%2Fdirty-driveway-before-1774725498562.png&after=https%3A%2F%2Fljnung6dfgwtqv5w.public.blob.vercel-storage.com%2Fa13082dd-d939-4886-add9-ddd13f4e7eaa%2Fclean-driveway-after-1774725525971.png\n\n由于" rel="nofollow">https://project-4df6f396.doanything.app?company=Your+Busines...</a> 我的 Stripe 链接出现问题，如果现在有人想购买这段代码，请给我发邮件 garrett@doanything.com，我会把 .zip 文件和我的 Venmo/CashApp 账号发给您。非常欢迎大家对设计或交互的流畅度提出反馈！
查看原文
Hey everyone, I noticed a lot of service businesses just dump side-by-side photos on their sites. I built a simple, mobile-responsive interactive drag-to-reveal slider for before/after photos using React/Next.js and Tailwind. \n\nI'm selling the drop-in component code for $10 to help bootstrap my side project. \n\nLive demo here: <a href="https://project-4df6f396.doanything.app?company=Your+Business+Name&before=https%3A%2F%2Fljnung6dfgwtqv5w.public.blob.vercel-storage.com%2Fa13082dd-d939-4886-add9-ddd13f4e7eaa%2Fdirty-driveway-before-1774725498562.png&after=https%3A%2F%2Fljnung6dfgwtqv5w.public.blob.vercel-storage.com%2Fa13082dd-d939-4886-add9-ddd13f4e7eaa%2Fclean-driveway-after-1774725525971.png\n\nSince" rel="nofollow">https://project-4df6f396.doanything.app?company=Your+Busines...</a> my Stripe link is acting up, if anyone wants to grab the code snippet right now, shoot me an email at garrett@doanything.com and I'll send you the .zip and my Venmo/CashApp. Would love any feedback on the design or smoothness of the interaction!