Product strip

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

const strip = document.querySelector(".related .reuse-carousel");
const carousel = createCarousel(strip, { group: "page" });

prevButton.onclick = () => carousel.prev();
nextButton.onclick = () => carousel.next();
const render = (state) => {
  prevButton.disabled = !state.canPrev;
  nextButton.disabled = !state.canNext;
};
carousel.subscribe(render);
render(carousel.getState());

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

export function Related({ prints }) {
  const { ref, carousel, state } = useCarousel({ group: "page" });
  return (
    <section className="related">
      <button disabled={!state.canPrev} onClick={() => carousel?.prev()}>Previous</button>
      <button disabled={!state.canNext} onClick={() => carousel?.next()}>Next</button>
      <div ref={ref} className="reuse-carousel">
        {prints.map((print) => <PrintCard key={print.id} print={print} data-carousel-slide />)}
      </div>
    </section>
  );
}