Wide Slide Reel

Gallery4: Wide Slide Reel

A single wide plate that slides one frame at a time, with the step controls up in the header and the caption, place and progress dashes on the row underneath.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/gallery4?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/gallery4?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/gallery4.tsx plus the badge7 eyebrow it uses.

Quick start

The installed file exports gallery4Demo alongside the block: the exact props behind the preview above. Spread it to get a working reel in one line.

import { Gallery4, gallery4Demo } from "@/components/beste/block/gallery4";

export default function Page() {
  return <Gallery4 {...gallery4Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Gallery4 } from "@/components/beste/block/gallery4";

export default function Page() {
  return (
    <Gallery4
      badge={{ label: "Reel" }}
      heading="One frame at a time, in the order we shot them."
      slides={[
        {
          src: "/reel/studio.jpg",
          alt: "Studio interior with a long shared worktable",
          title: "Concrete, timber, one long table",
          meta: "Studio, Rotterdam",
        },
        {
          src: "/reel/specimens.jpg",
          alt: "Specimen sheets laid out on a table",
          title: "Specimen sheets, laid flat",
          meta: "Studio table, morning light",
        },
      ]}
      labels={{ previousLabel: "Previous slide", nextLabel: "Next slide" }}
    />
  );
}

Props

type Slide = {
  src: string;
  alt: string;
  title: string;
  meta: string;
};

type Gallery4Labels = {
  previousLabel?: string;
  nextLabel?: string;
};

Behavior notes

• The reel is one flex row translated by activeIndex * 100% inside an overflow-hidden frame, so there is no scroll position to fight and no scrollbar to hide.
• Stepping wraps in both directions, so the last frame runs back to the first rather than dead-ending.
• The step controls only render when there is more than one slide, so a single-picture reel has no controls to press.
• They sit in the header on the heading's baseline, which keeps them in the same place whatever the caption underneath does.
• Progress dashes are real button elements with aria-pressed and an aria-label carrying the slide title, so they are a control rather than a decorative row of dashes.
• The plate switches ratio rather than height (aspect-[16/10] becoming md:aspect-[2/1]), keeping the reel cinematic on desktop without a letterbox strip on a phone.
• The caption row is a md:grid-cols-[1fr_auto] md:items-end, so the title stays left and the dashes sit at the right on the same baseline.
• This block is a reel rather than a lightbox gallery: it has no viewer, because the plate is already the full-width view.