Orbit slider

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Orbit slider—the ideas, syntax, and habits you need before moving on in Foundation.

Foundation skills help when you inherit marketing sites built on Zurb’s grid system.

You will apply Orbit slider in contexts like: Large marketing sites, email-adjacent layouts, and legacy responsive redesigns.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Orbit is Foundation’s carousel for hero rotators and image galleries. The root div.orbit carries data-orbit; slides live in ul.orbit-container as li.orbit-slide items. Previous/next buttons and bullet navigation are part of the component—not something you should rebuild from scratch on every marketing homepage.

Accessibility

Add role="region" and an aria-label on the root. Use show-for-sr text on arrow buttons so screen reader users get meaningful names. Pause auto-advance if marketing asks for motion—many users prefer reduced motion.

Performance

Optimize images inside slides; carousels multiply LCP cost if every slide loads a huge asset upfront.

Self-check

Which attribute initializes Orbit?
What element wraps individual slides?
Why add screen-reader text to prev/next controls?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Auto-play a11y issue?
Pause control needed?

No discussion yet. Be the first to ask a question.