Getting started

Install the package, mark the slides, and bind the strip. Your slides stay your own elements.

Install

npm install @reuse-sh/carousel

Bind a strip

The viewport gets the reuse-carousel class. Slides are its children, or anything marked with data-carousel-slide. Links and buttons inside them keep working.

import { createCarousel } from "@reuse-sh/carousel";
import "@reuse-sh/carousel/styles.css";

const viewport = document.querySelector(".reuse-carousel");
const carousel = createCarousel(viewport, { loop: true, align: "start" });

const render = (state) => {
  counter.textContent = state.index + 1 + " / " + state.count;
};
carousel.subscribe(render);
render(carousel.getState());

// Later, when the strip leaves the page
carousel.destroy();

import { useCarousel } from "@reuse-sh/carousel/react";
import "@reuse-sh/carousel/styles.css";

export function Strip({ photos }) {
  const { ref, carousel } = useCarousel({ loop: true });
  return (
    <div>
      <div ref={ref} className="reuse-carousel">
        {photos.map((photo) => (
          <img key={photo.src} src={photo.src} alt={photo.alt} data-carousel-slide />
        ))}
      </div>
      <button onClick={() => carousel?.next()}>Next</button>
    </div>
  );
}

Style it

Set --reuse-carousel-slide-width and --reuse-carousel-gap on the viewport. Arrows, dots and counters are your own markup, driven by the state you subscribe to.