Gallery

Astro image galleries with a centered project carousel and text overlays.

Projects carousel

---
import ProjectsCarousel from "@/components/blocks/gallery/projects-carousel.astro"
import coast from "@/assets/wizard/wizard-from-back.jpg"
import moon from "@/assets/wizard/wizard-on-moon.jpeg"
import clouds from "@/assets/wizard/wizard-above-clouds.jpeg"
---

<ProjectsCarousel
  label="Featured projects"
  slides={[
    {
      title: "A view of the coast",
      description: "A quiet place to stop and plan the next part of the trip.",
      image: { src: coast, alt: "A wizard looks out over the coast." },
      href: "#coast",
      button: "View project",
    },
    {
      title: "A trip to the moon",
      description: "A new view of the night sky from the surface of the moon.",
      image: { src: moon, alt: "A wizard stands on the moon." },
      href: "#moon",
      button: "View project",
    },
    {
      title: "Above the clouds",
      description: "A clear view from the mountain, high above the clouds.",
      image: { src: clouds, alt: "A wizard stands above the clouds." },
      href: "#clouds",
      button: "View project",
    },
  ]}
/>

bunx shadcn@latest add @gnosticai/projects-carousel

npx shadcn@latest add @gnosticai/projects-carousel

pnpm dlx shadcn@latest add @gnosticai/projects-carousel

The selected project appears at full size with its title, description, and link. Side images are smaller and dimmed. Select a side image, use the arrow buttons, or use the dots below the images. The dots sit on the right.

Pass a slides array. Each slide has title, description, href, button, and image. The image has src and alt. Its source can be a string or an imported Astro image. String sources can also supply width and height. Set label to give the carousel an accessible name.

An empty array renders no block. One project renders at full width without navigation controls. Image dimensions and the square frame keep the layout stable while images load.

Make your own layout

The block uses Carousel with variant="parallax". Use the base carousel’s image and overlay slots when you need your own caption layout. Use only the image slot for an image gallery. The base carousel supplies the effect, selected state, and dot navigation.

Responsive layout and images

Each slide uses 70% of the carousel width in a narrow container. In a wide container, each slide uses half the width. One project always uses the full width. Keep titles and descriptions short so they fit over the image on mobile.

Images fill a square frame and crop to fit. Use images whose subject stays visible in a square crop. Supply useful alt text and image dimensions. Imported Astro images supply their dimensions automatically.