An Embla-backed slide composition with original navigation arrows.
Preview
Example source could not be loaded: carousel-example. Reload this page to retry.Usage
Give Carousel an accessible name, place Content and Item inside it, then Previous and Next within the same provider. The example has three world cards; arrows retain default accessible Previous/Next slide names.
Composition
Root accepts opts, plugins and setApi and defaults to horizontal orientation. It derives the Embla axis from orientation. useCarousel and all parts require the provider. Arrow variant and size support default only; Card is a separately installed composition.
Interaction and limits
Arrow keys respect vertical orientation and RTL and avoid text-edit targets. Dragging and slide state are web adaptations; native pixel scope applies to arrow constituents rather than the whole carousel. The example includes its own arrow clearance and layout.
See the upstream API for the underlying part and event contracts.
Installation
The world-card example also uses Card; install card when copying that composition.
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import useEmblaCarousel from "embla-carousel-react";
import type { UseEmblaCarouselType } from "embla-carousel-react";
import * as React from "react";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import { playMinecraftClick } from "./minecraft-sound";
import "./minecraft-pagination.css";
import "./minecraft-pagination-assets.css";
import "./minecraft-carousel.css";