Spark Slider

High-performance framework-agnostic React carousel slider powered by Framer Motion.

✦ Screencast

spark-slider-linkedin.mp4

spark-slider.vercel.app

Lightweight and fast React slider carousel powered by Framer Motion animations. Designed as a modern and highly optimized solution for large image datasets, it works seamlessly across laptops, tablets, and phones, with smooth support for both touch and mouse/keyboard input.

✦ For businesses and users

A robust slider suitable for galleries, installations, projections, events, or products that need precise, smooth interactions and an accessible UI.

✦ Features

• Smooth drag-to-swipe with momentum-free, precise control
• Click on center card to select (single tap on touch)
• Auto-play with pause on interaction and hidden tab detection
• Responsive layout using viewport units (svh/svmin)
• Keyboard navigation (arrow keys)
• Accessibility features with ARIA support
• Performance: renders only visible cards, lazy loading for non-center images
• Lightweight (~12KB gzipped core)
• Framework-agnostic: works with Next.js, Vite, Create React App, Remix, Gatsby, and any React framework

✦ Vercel demo

• 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).

For developers

• Packaged as an npm React library for easy reuse in apps
• NPM Package: @ashbuk/spark-slider
• Package documentation: packages/spark-slider/README.md
• Public API surfaces are documented with concise TSDoc

Installation

npm install @ashbuk/spark-slider
# or
yarn add @ashbuk/spark-slider
# or
pnpm add @ashbuk/spark-slider

Quick Start:

import SparkSlider from '@ashbuk/spark-slider';
import '@ashbuk/spark-slider/dist/spark-slider.css';

const images = ['/image1.jpg', '/image2.jpg', '/image3.jpg'];

export default function App() {
  return <SparkSlider images={images} />;
}

• Start onboarding by reading:
• DEVELOPMENT.md
• CONTRIBUTING.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.

✦ Links and contact

📝 Original article: Read on my blog

• GitHub: https://github.com/AshBuk
• LinkedIn: https://www.linkedin.com/in/ashbuk/
• Email: [email protected]

✦ MIT License - see the LICENSE file for details.

✦ Sponsor

If you find Spark Slider useful, please consider supporting development.