spark-slider-linkedin.mp4
Lightweight and fast React slider carousel powered by Framer Motion animations. Designed as a modern, custom, and highly optimized solution for large image datasets, it works seamlessly on laptops, tablets, and phones, with smooth support for both touch and mouse/keyboard input.
A robust slider suitable for galleries, installations, projections, events, or products that need precise, smooth interactions and an accessible UI.
- Smooth drag-to-swipe with momentum-free, precise control
- Click on the center card to enter fullscreen (single tap on touch)
- Auto-play with pause on interaction
- Responsive layout using viewport units (
svh/svmin) - Simple image uploads UI (Browse/Manage)
- Public demo: spark-slider.vercel.app You are viewing a hosted demo on Vercel. Images are randomized daily via picsum.photos (sourced from the Unsplash photographers collection). Uploading and managing your own images is disabled here. I am considering expanding the online service with private-cloud storage so users can manage their own images. // Private preview (if provided): uploads and deletes are enabled (images up to 5 MB; common image formats).
- Packaged as an npm React library for easy reuse in apps (see
packages/spark-slider/README.md).
Install as a library
npm i @ashbuk/spark-slider framer-motion react react-dom- Stars are appreciated; contributions are welcome! Start onboarding by reading:
DEVELOPMENT.mdCONTRIBUTING.md- Comments in the codebase are concise and serve as additional documentation.
- The project adheres to SOLID and DRY principles.
- The slider uses modern technologies with minimal dependencies (Next.js 15 App Router, React, Framer Motion, Tailwind CSS, CSS viewport units
svh/svmin). - Performance: renders only visible cards, non-visible slides are not mounted, non-center images use
loading="lazy". Scales to large image lists while keeping the DOM small.
- GitHub: https://github.com/AshBuk
- LinkedIn: https://www.linkedin.com/in/ashbuk/
- Email: 2asherbuk@gmail.com
MIT — see LICENSE.
