quartz/docs/plugins/Carousel.md

title
Carousel

The Carousel plugin transforms custom <Carousel> tags in your Markdown into interactive image galleries with navigation controls, dot indicators, and modal viewing capabilities.

Syntax

<Carousel>
<img src="image1.jpg" alt="First image">
<img src="image2.jpg" alt="Second image">
<img src="image3.jpg" alt="Third image">
</Carousel>

Configuration

const config: QuartzConfig = {
  configuration: {
    // ...
  },
  plugins: {
    transformers: [
      // ...
      Plugin.Carousel({
        showDots: true, // Show dot indicators (default: true)
      }),
    ],
    filters: [
      // ...
    ],
    emitters: [
      // ...
    ],
  },
}

Features

The carousel automatically handles multiple images and provides intuitive navigation controls for users to browse through your image collections.

• Navigation: Click arrows or use keyboard (←/→ keys)
• Touch Support: Swipe gestures on mobile devices
• Modal View: Click images for full-screen viewing
• Responsive: Adapts to different screen sizes
• Accessibility: ARIA labels and keyboard navigation
• Theme Support: Works with light/dark modes