Join Jen Kramer for an in-depth discussion in this video Design a photo carousel with Orbit, part of Learning Foundation 6.
You'll notice we have arrows for clicking through the images, we have dots for dot-based navigation through those images as well. So we're going to build something that looks very similar to this, and we're going to do that here on the inside page of the website we've been working on. Here, in the right-hand column, we have a bunch of photos that are pictures of wedding cakes, and right now, these are marked up as an unordered list. We are going to add the required markup in order to turn this into an image carousel.
So, if you jump into Sublime Text, you'll need to re-download a copy of inside.html from your exercise files folder for this particular video. I've added a few things to this particular file, including navigation and then the photos for the wedding cakes. What you'll want to do is scroll on down here to around like 52, and here is the aside that contains all of these pictures of wedding cakes. You'll notice that the first and the fourth one in this particular situation have just an image, whereas the second and third are inside of a figure markup.
So we have an image plus a figure caption. In other words, words that we're going to want to appear on top of the picture as part of this process. So, there's several parts here for putting this together, and we're going to start with a div that's going to go around this whole thing, and that div is going to have a class of orbit, and then we're going to assign a few things that are here for accessibility purposes.
A role of region, so, again, that's for accessibility purposes, so if you leave it out, the carousel will work just fine ultimately, but chances are, you're going to need some kind of accessibility help and this will help you get there. And aria-label equals quote Wedding Cakes. So again, that has to do with accessibility. And then, finally, data-orbit.
And then we'll close that div down here as well. And I'm going to indent this code just a little bit, to keep it easy to read. Then the next thing that we're going to do is we're going to add a bunch of classes to some of this markup inside of the unordered list, and this is for formatting the image carousel. So, everywhere you see an image, we're going to add to it a class of orbit-image, so I'm just going to copy that.
And I'll paste that in all of my images. Inside of the figures here, we're going to add a class of orbit-figure, so we have two figures. Going to just need to do that twice. Inside of each figure caption, we're going to add a class of orbit-caption. So, for both of your figure captions, go on ahead and put that class in place.
Up on the UL itself, we're going to add another class here. And that'll be orbit-container. And then on each of these LIs, we're going to add a class of orbit-slide. If you want to go ahead and copy that, we're going to include that in each LI. And then go back to the first LI and add to it an additional class, which is is-active.
There's no way, necessarily, to go to the next slide or go back to a previous slide, these are just rotating here on the page, and that may be exactly what you're looking for, but if you do want to have some navigation, you can add some navigation to this as well, both in the form of arrows that are clickable and that additional dot navigation at the bottom. So let's go ahead and add that, and as I said, it's not strictly required in order for the carousel to work, it's just a question of what you want to include as part of your particular carousel. So, in your exercise files folder for this video, you'll find a code snippet that has two bits of HTML that we're going to incorporate into this.
So, let's incorporate this first bit here at the top for the left and right arrows. This comes right straight out of the documentation for Orbit, and you'll see what this is. It's just simply a button, so the whole thing is a button. There's a class that has orbit-previous. And then, notice inside of this, we have a span with a class of show-for-sr. What is that? It means show for screen reader, so these words, previous slide or next slide, if you're working with a screen reader, that will actually be read by the screen reader, because otherwise, you just have these white triangles, it's not clear, necessarily, to somebody who's using assistive technologies what those arrows do.
So, it's helpful to have these additional classes for accessibility purposes. And then the little stuff here in the middle, it looks kind of mysterious, that is actually the code for the arrow. So if you go on ahead and copy that little bit of code, we're going to put it into our HTML, and that's going to go right after the div with a class of orbit-wrapper. Just go on ahead and drop that in right here. And I'm going to indent that a little bit to keep things easy to read, okay? Go on ahead and save that.
And if you now refresh your webpage, the arrows are here. In this first image, it's hard to see, because it's a white cake with white arrows, but as you roll your mouse over them, you'll see that they're there. And give it just a second here, this is going to start turning. And so, now I can click through these images really quickly. But I can go just forwards or backwards. With just four images, that's probably just fine, it's probably all you really need to do. But if I had a whole bunch of pictures here and maybe I wanted to jump to one in particular, dot navigation becomes super helpful.
So, let's go back to our code here, and in our code snippet, you'll see here I have some text for the bullet navigation. So, this is marked up in a nav tag because this is navigation, thus the nav tag. Inside of the nav tag, there's a series of buttons here. Each button has the following markup, so. They have a data-slide attribute, and it's going to equal a number, it's going to count like an engineer, so we start with zero, rather than starting with one. So, zero, one, two, three.
Alright, so, go on ahead and copy that little bit of HTML, and we're going to drop it here into our code, and where we can put that is after the div here, but before the second div. We'll go ahead and paste that in. And we indent a little bit to keep it nice and neat. So, if you were going to do this on your own, you can copy the same bit of code, which, again, originates at the Zurb documentation site.
You could continue copying this lines of code, you continue to add numbers in order, and you're going to continue to add descriptions of whatever it is you're showing on the page. Go on ahead and save that, and when you jump back to your web browser and refresh, you'll notice that you have the dots down here on the bottom for the dot navigation. You can click on any of these dots and pull up the corresponding image in whatever order they happen to be displayed here. Alright, so, that is a fully-functional image carousel with two forms of navigation. You can do it this way, you can do it with no navigation, or you can include just one kind of navigation, whatever it is you want to do.
As always, Foundation is fairly modular, so you can pick and choose the bits that you want to incorporate for your webpage.
- Working with the XY Grid system
- Adjusting margins and padding
- Block versus vertical grids
- Overriding CSS
- Including cards and callouts
- Customizing the navigation, including dropdown and drilldown menus