This is a quick explanation/tutorial about the Foundation CSS Framework’s Orbit media component.
As explained in the linked documentation above, an orbit is a control that displays images that automatically changes from one to another, kind of like a PowerPoint slide. Instead of having bullets as they show in their page, you could also display thumbnails of the image slides instead. To use images instead of bullets, you can see this link.
However, in the rare case where you want to display an image (or whatever) in the carousel, but don’t want the image to show up as a thumbnail in the navbar underneath, you might be tempted to just add the orbit-slide in the orbit-container, but not associating it with anything in the navbar.
<div class="orbit" role="region" aria-label="My Cats Orbit" data-orbit>
<div class="orbit-container">
<div class="orbit-slide is-active">
<div class="banner text-center">
Make sure to wear a mask when you step outside and wash your hands for 20 seconds!
</div>
</div>
<div class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="../img/kenny800.jpg">
<figcaption class="orbit-caption">Kenny on a blanket</figcaption>
</figure>
</div>
<div class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="../img/murphy.jpg">
<figcaption class="orbit-caption">Murphy staring</figcaption>
</figure>
</div>
<div class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="../img/kennycropped800.jpg">
<figcaption class="orbit-caption">Kenny outside</figcaption>
</figure>
</div>
<div class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="../img/murphy_sleep.jpg">
<figcaption class="orbit-caption">Murphy sleeping</figcaption>
</figure>
</div>
<div class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="../img/together.jpg">
<figcaption class="orbit-caption">Cats together</figcaption>
</figure>
</div>
</div> <!-- End Orbit Container -->
<nav class="orbit-bullets hide-for-small-only">
<a class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</a>
<a class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</a>
<button class="is-active" data-slide="0">
<span class="show-for-sr">First slide details</span>
<span class="show-for-sr">Current slide</span>
<img class="thumbnail" class="orbit-image" src="../img/kenny800.jpg">
</button>
<button class="is-active" data-slide="1">
<span class="show-for-sr">Second slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/murphy.jpg">
</button>
<button class="is-active" data-slide="2">
<span class="show-for-sr">Third slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/kennycropped800.jpg">
</button>
<button class="is-active" data-slide="3">
<span class="show-for-sr">Third slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/murphy_sleep.jpg">
</button>
<button class="is-active" data-slide="4">
<span class="show-for-sr">Third slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/together.jpg">
</button>
</nav>
</div> <!-- End Orbit -->
If you do, you’ll end up a bug. If you click on any of the thumbnails at the bottom, the orbit will bring up the wrong image (off-by-one error).
Do NOT do this:
<nav class="orbit-bullets hide-for-small-only">
<a class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</a>
<a class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</a>
<button class="is-active" data-slide="1">
<span class="show-for-sr">First slide details</span>
<span class="show-for-sr">Current slide</span>
<img class="thumbnail" class="orbit-image" src="../img/kenny800.jpg">
</button>
<button class="is-active" data-slide="2">
<span class="show-for-sr">Second slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/murphy.jpg">
</button>
<button class="is-active" data-slide="3">
<span class="show-for-sr">Third slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/kennycropped800.jpg">
</button>
<button class="is-active" data-slide="4">
<span class="show-for-sr">Third slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/murphy_sleep.jpg">
</button>
<button class="is-active" data-slide="5">
<span class="show-for-sr">Third slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/together.jpg">
</button>
</nav>
This will cause your orbit to break if you click on the same thumbnail twice.
Instead, add another data-slide button in the navbar with a data-slide value of 0, but put the class “hide” on it to make it not show up. This will fix the both of the bugs mentioned above.
<div class="orbit" role="region" aria-label="My Cats Orbit" data-orbit>
<div class="orbit-container">
<div class="orbit-slide is-active">
<div class="banner text-center">
Make sure to wear a mask when you step outside and wash your hands for 20 seconds!
</div>
</div>
<div class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="../img/kenny800.jpg">
<figcaption class="orbit-caption">Kenny on a blanket</figcaption>
</figure>
</div>
<div class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="../img/murphy.jpg">
<figcaption class="orbit-caption">Murphy staring</figcaption>
</figure>
</div>
<div class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="../img/kennycropped800.jpg">
<figcaption class="orbit-caption">Kenny outside</figcaption>
</figure>
</div>
<div class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="../img/murphy_sleep.jpg">
<figcaption class="orbit-caption">Murphy sleeping</figcaption>
</figure>
</div>
<div class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="../img/together.jpg">
<figcaption class="orbit-caption">Cats together</figcaption>
</figure>
</div>
</div> <!-- End Orbit Container -->
<nav class="orbit-bullets hide-for-small-only">
<a class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</a>
<a class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</a>
<button class="is-active hide" data-slide="0">
</button>
<button class="is-active" data-slide="1">
<span class="show-for-sr">First slide details</span>
<span class="show-for-sr">Current slide</span>
<img class="thumbnail" class="orbit-image" src="../img/kenny800.jpg">
</button>
<button class="is-active" data-slide="2">
<span class="show-for-sr">Second slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/murphy.jpg">
</button>
<button class="is-active" data-slide="3">
<span class="show-for-sr">Third slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/kennycropped800.jpg">
</button>
<button class="is-active" data-slide="4">
<span class="show-for-sr">Third slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/murphy_sleep.jpg">
</button>
<button class="is-active" data-slide="5">
<span class="show-for-sr">Third slide details</span>
<img class="thumbnail" class="orbit-image" src="../img/together.jpg">
</button>
</nav>
</div> <!-- End Orbit -->
But why?
Why would you ever do this?
Well, I don’t know.
In our case, we needed to show an image (a meme) that shows up when you load the page, but wasn’t part of the actual carousel of images, like it was semantically different. Maybe we shouldn’t have put it in the carousel at all, but the point is that we learned how important it was for the navbar of data-slides to mirror the orbit-slides in the container.
Code
View the code on Github
Johnny's Dabblings 