展示 HN：用于 React/Next.js 的拖动揭示前后对比滑块组件
大家好，我注意到很多服务类企业在他们的网站上只是简单地放置并排的照片。我使用 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" 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!