---
title: Gallery
description: "Astro image galleries with a centered project carousel and text overlays."
seo:
    title: "Astro Gallery blocks — project carousel"
---

## Projects carousel

```astro
---
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",
    },
  ]}
/>
```

```sh
bunx --bun 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](/components/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.