snappery

snappery

snappery is a scroll slider carousel for React that uses CSS scroll snap points with ESM & TypeScript support. It leverages the latest CSS features for making powerful fluid galleries that perform well in modern browsers.

Install

pnpm install snappery

Use

// a simple horizontal slider

import { Snappery, SanpperyContent, SanpperyItem } from "snappery";
import "snappery/dist/esm/styles.css";

export default function BasicDemo() {
  return (
    <Snappery>
      <SanpperyContent>
        <SanpperyItem>
          <div>
            Item One
          </div>
        </SanpperyItem>
        <SanpperyItem>
          <div>
            Item One>
          </div>
        </SanpperyItem>

        <SanpperyItem>
          <div>
            Item One
          </div>
        </SanpperyItem>
      </SanpperyContent>
    </Snappery>
  );