Docs·Carousel 003

Carousel 003

Gallery carousel with floating pill controls, expanding dot timer, pause/replay, and horizontal blur-slide transitions.

Installation

$pnpm dlx shadcn@latest add @spiderui/carousel-003

Usage

Gallery carousel with a top-left title, horizontal slide transitions (exit left, enter right) with blur, and glass pills below the image. The active dot expands and fills on a timer like Carousel 001 — click any dot to jump. Auto-advance stops on the final slide; the control button cycles pause, play, and replay depending on state. Pills share the same height and lift slightly into the image on scroll.

Gallery carousel layout inspired by creative portfolio showcases. Images from Cosmos.

API Reference

PropTypeDefault
titleHeading at the top left of the carousel.
string—
slidesSlide data with image src and optional alt text.
Carousel003Slide[]DEFAULT_CAROUSEL_003_SLIDES
intervalAuto-advance interval in milliseconds.
number4000
classNameClasses on the root section.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Our Creative Gallery

Synthesizer keyboard against a blue sky
import { Carousel003 } from "@/components/ui/carousel-003"
export default function Page() {
  return (
    <Carousel003
      title="Our Creative Gallery"
      slides={[
        {
          id: "one",
          imageSrc:
            "https://cdn.cosmos.so/ef24a640-42da-4133-96a0-4572d2b0ccbe?format=webp&w=1200",
          imageAlt: "Neon signal in darkness",
        },
        {
          id: "two",
          imageSrc:
            "https://cdn.cosmos.so/6d05ef91-722e-4fcc-83c5-765e348ec644?format=webp&w=1200",
          imageAlt: "Atmospheric horizon scene",
        },
      ]}
    />
  )
}