Using Marquees

Marquees create an infinite horizontal scroll — great for photo galleries or logo strips. Items are automatically duplicated to fill the screen:

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';
import photo3 from '@assets/events/photo-3.jpg';

<Marquee>
  <Img src={photo1} alt="Photo 1" />
  <Img src={photo2} alt="Photo 2" />
  <Img src={photo3} alt="Photo 3" />
</Marquee>

Hover over the marquee to pause it. On touch devices, you can drag the marquee horizontally to browse content — auto-scrolling resumes when you release.

Options

Speed and direction

<Marquee speed={80} direction="right">...</Marquee>

speed is in pixels per second (default: 50). direction can be "left" (default) or "right".

Height

Four presets: "sm" (12rem), "md" (16rem, default), "lg" (20rem), "xl" (24rem):

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

Disable pause on hover

<Marquee pauseOnHover={false}>...</Marquee>

Optional Fields