Carousel

Slides that scroll and snap, with arrows and dots.

Source

Product screenshots

One screenshot with part of the next one showing. Set arrows when users may not know they can swipe, such as for screenshots on desktop. The arrows show on hover.

PostHog experiment results
Compare experiment variants and inspect the results.
PostHog business intelligence
Query your data in PostHog.
Slide 1 of 2

Several slides per view

Wider containers show up to three cards.

“PostHog's experimentation suite is really great!”
Cat LiProduct & Engineering Lead, Y Combinator
“PostHog is the first analytics platform where I can be 100% confident in the data. I've finally got the data insight platform I've always wanted as a Product person.”
Jonathan HydeFormer Head of Product, Legl
“My favourite piece of software, and support experience this week, goes to PostHog. If you’re after an awesome self-hosted analytics tool, check it out!”
Tim LucasFounder & CEO, BuildKite
“PostHog has helped us improve our product and helped us get a much better understanding of our users than we've ever been able to before.”
Anca FilipHead of Product, MentionMe
“We looked at Amplitude, Mixpanel and Pendo and not only were they far too expensive but it was also very unclear how they worked in terms of data privacy.”
Joe SaundersonTechnical Lead, MentionMe
“The fact that PostHog is open source was really helpful. The cloud formation templates made deployment easy and we were up and running within a day, but because it’s open source we can also open the codebase and figure things out if needed. We’ve iterated and built out an entire stack for ourselves since launching PostHog.”
Lleo HarressTechnical Lead, MentionMe
Slide 1 of 6

Optional automatic slides

Campus photos advance every five seconds. The active dot fills while the next slide waits. Use the pause button to stop automatic slides.

UC Davis students at a PostHog event
UC Davis students at a PostHog event
The UC Davis campus community
The UC Davis campus community
PostHog on campus
PostHog on campus
Slide 1 of 3

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

  • Use a carousel to browse a set of similar items. Do not put content that every user must see after the first slide.
  • Use slides with the same aspect ratio, so the row height stays stable.
  • Use autoplay rarely. It stops when the user focuses or moves the carousel, and it is off for users who prefer reduced motion.

API

Carousel is a site component. Each child becomes one slide. It uses native CSS scroll-snap without a slider dependency.

Carousel

PropTypeDefaultDescription
labelstring–Names the carousel region.
childrenReactNode–One slide per child. Use stable keys when data changes.
slidesPerView1 | 2 | 3 | 41Sets the maximum slide count in a wide container.
peekbooleanfalseShows 10% of the next slide, from 32px to 80px, with a soft edge fade.
autoplaynumber0Sets the delay in milliseconds. Zero disables it. The minimum delay is 1000ms.
dotsbooleantrueShows buttons for distinct scroll stops.
arrowsbooleanfalseShows previous and next buttons on the left and right of the slides. They appear on hover and keyboard focus, and always on touch screens.
onActiveIndexChange(index: number) => void–Receives the zero-based index at the active scroll stop.
className / slideClassNamestring–Adds classes to the region or each slide.