mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-20 03:14:06 -06:00
51 lines
1.1 KiB
Markdown
51 lines
1.1 KiB
Markdown
---
|
|
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
|
|
|
|
```markdown
|
|
<Carousel>
|
|
<img src="image1.jpg" alt="First image">
|
|
<img src="image2.jpg" alt="Second image">
|
|
<img src="image3.jpg" alt="Third image">
|
|
</Carousel>
|
|
```
|
|
|
|
## Configuration
|
|
|
|
```typescript
|
|
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
|