Build a carousel from a track of slides with prev/next and bullet controls, using the .f0-carousel class convention.
Where: Right sidebar → Interactions → Standalone → Carousel — Add a Carousel interaction to a .f0-carousel container
Key ideas
- Class convention: Parent .f0-carousel, track .f0-carousel-track, slides .f0-carousel-slide, controls .f0-carousel-prev/-next, bullets .f0-carousel-bullets.
- One interaction: A single carousel interaction wires prev/next/bullet selectors to the track.
Steps
- Structure the markup with the .f0-carousel classes (track wrapping the slides).
- Add a Carousel interaction (Standalone category) on the .f0-carousel container.
- Confirm the prev/next/bullet selectors and preview the slide motion.
- Add matching active and leave actions, test navigation forward and backward, then test initial page load above/below the viewport threshold and hover during autoplay.
Active/leave actions, viewport start, and hover pause
Carousels can run ordered actions when a slide becomes active and when it leaves. Targets are scoped to the selected slide context. Use start-when-in-view to defer playback/lifecycle actions until the track reaches the viewport start gate, and Pause on hover to control autoplay while the pointer is over it.
- Action types: video/audio playback, simulate click, custom event, add/remove/toggle class, set/remove attribute, set CSS variable, and change content.
- Set the slide selection and target for each action. Active and leave actions are separate lists, useful for starting and stopping embedded media.
- The viewport gate starts when the track’s top reaches the viewport center; it is not a generic “any pixel visible” trigger.
- Pause on hover is exposed in the animation controls and defaults on unless disabled.