18 KiB
| title | description | sass | js | mui | video | tags | ||
|---|---|---|---|---|---|---|---|---|
| Orbit | An image and content carousel with animation support and many customizable options. | scss/components/_orbit.scss | js/foundation.orbit.js | true | l0bdHvBuylA |
|
Basics
Orbit doesn't automatically generate any HTML for you, giving you the flexibility to move around the various pieces of the plugin. Here's a complete example—we'll break down the individual pieces farther down.
Please note that apart from Javascript, Motion UI is a dependency for Orbit to work properly. If in case, you don't want any animations within your Carousel, you can always disable the animation.
Watch this part in video
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
</div>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<figcaption class="orbit-caption">Space, the final frontier.</figcaption>
</figure>
</li>
<li class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="https://placehold.it/1200x600/888?text=Slide-2" alt="Space">
<figcaption class="orbit-caption">Lets Rocket!</figcaption>
</figure>
</li>
<li class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="https://placehold.it/1200x600/777?text=Slide-3" alt="Space">
<figcaption class="orbit-caption">Encapsulating</figcaption>
</figure>
</li>
<li class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="https://placehold.it/1200x600/666&text=Slide-4" alt="Space">
<figcaption class="orbit-caption">Outta This World</figcaption>
</figure>
</li>
</ul>
</div>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
</div>
-
Space, the final frontier. -
Lets Rocket! -
Encapsulating -
Outta This World
Wrapper
The wrapper houses the entire carousel. We use the aria-label attribute to label what the carousel is, for assistive technology.
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
</div>
Slide Container
The slide container houses each individual slide. In our above markup example, we also placed the buttons in here, so we can anchor them to the center edge of the slide container. However, they can be moved anywhere within the data-orbit wrapper.
Each slide is an <li> with the class .orbit-slide. The first slide is marked with the .is-active class to indicate it's the default. You can place any HTML you want inside of the slide, but we have some premade styles for image-based slides with a caption.
<ul class="orbit-container">
<li class="orbit-slide is-active">
<figure class="orbit-figure">
<img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
<figcaption class="orbit-caption">Space, the final frontier.</figcaption>
</figure>
</li>
<!-- More slides... -->
</ul>
Next/Previous Arrows
Orbit controls use the class .orbit-previous and .orbit-next. The below example has an important accessibility hook: since we're using ASCII arrows for the carousel controls, we add screen reader-only text (wrapped in the class .show-for-sr) that explain what the controls do.
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> ◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span> ▶︎</button>
Bullets
The bullets serve two purposes: they mark the current slide, and can be clicked on to navigate to another slide. Like with the controls, the bullets also have screen reader-friendly labels.
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
Slide Contents
A carousel slide can contain images or HTML—you can even mix between slides in one carousel!
Watch this part in video
<li class="orbit-slide">
<div>
<h3 class="text-center">2: You can also throw some text in here!</h3>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
<h3 class="text-center">This Orbit slider does not use animations.</h3>
</div>
</li>
-
This is dodgerblue. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
This is rebeccapurple. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
This is darkgoldenrod. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
This is lightseagreen. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Using Animation
Orbit uses Motion UI CSS classes to animate slides around.
Without the inclusion of the `motion-ui` [Motion UI](motion-ui.html) CSS file in your template, Orbit slider fails to work properly.
There are four plugin options you can set to change the default effects:
data-anim-in-from-left: transition to play when a slide comes in from the left.data-anim-in-from-right: transition to play when a slide comes in from the right.data-anim-out-to-left: transition to play when a slide comes out to the left.data-anim-out-to-right: transition to play when a slide comes out to the right.
Since those option names are pretty long, you can also set them all in one HTML attribute, using data-options:
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>
-
Space, the final frontier. -
Lets Rocket! -
Encapsulating -
Outta This World
Disabling Animation
To disable Motion UI, set the plugin option useMUI to false. Written as an HTML attribute, that's data-use-m-u-i="false".
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
</div>
-
Space, the final frontier. -
Lets Rocket! -
Encapsulating -
Outta This World