@blossom-carousel/react v0.1.2

Blossom Carousel

A native-scroll-first carousel enhanced with drag support for React.

Installation

npm install @blossom-carousel/react

React

import { BlossomCarousel } from "@blossom-carousel/react";
import "@blossom-carousel/core/style.css";

function App() {
  return <BlossomCarousel>{/* slides */}</BlossomCarousel>;
}

Next.js

Add the import to your page or component:

import { BlossomCarousel } from "@blossom-carousel/react";
import "@blossom-carousel/core/style.css";

export default function Page() {
  return <BlossomCarousel>{/* slides */}</BlossomCarousel>;
}

Usage

<BlossomCarousel>
  {Array.from({ length: 12 }, (_, i) => (
    <div>{i}</div>
  ))}
</BlossomCarousel>

as

Define the HTMLElement of the carousel root.

<BlossomCarousel as="ul">
  {Array.from({ length: 12 }, (_, i) => (
    <div>{i}</div>
  ))}
</BlossomCarousel>

Renders as

<ul>
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  ...
</ul>

Examples

• Simple
• Variable widths
• CSS Grid
• Multiple rows
• Snapping
• Grouping
• Sticky
• Coverflow