Using Carousels

Carousels cycle through slides with arrows, dots, and optional auto-scrolling. Each direct child becomes a slide.

Important: <Img> images inside a carousel must have click-to-enlarge enabled (the default) for proper rendering. Do not set enableClickToEnlarge={false} on carousel slides.

import { Accordion, Button, Callout, Carousel, Center, ImageGrid, Img, Instagram, Marquee, YouTube, SideBySide, Left, Right } from '@mdx';
import photo1 from '@assets/events/photo-1.jpg';
import photo2 from '@assets/events/photo-2.jpg';

<Carousel>
  <Img src={photo1} alt="First slide" />
  <Img src={photo2} alt="Second slide" />
</Carousel>

Navigate with the arrows or dots below. On mobile, you can swipe.

Options

Auto-scrolling

<Carousel autoScroll autoScrollInterval={3000}>
  ...
</Carousel>

Pauses on hover. autoScrollInterval is in milliseconds (default: 5000).

Height

Five presets: "sm" (300px), "md" (400px, default), "lg" (500px), "xl" (600px), or "auto" (content height):

<Carousel height="lg">...</Carousel>

Hide controls

<Carousel showArrows={false} showDots={false}>...</Carousel>

Optional Fields