Join Jen Kramer for an in-depth discussion in this video Designing a photo carousel with Orbit, part of Up and Running with Foundation 5.
- View Offline
And this is the start of what you're going to see before we do anything. It's a series of 6 images here going down the page and of course there's a bullet in front of each of these because we've marked this up with an unordered list in our HTML. If you open up sublime text and open up that same carousel.HTML, scroll all the way on down here on the page to line 44 and 45. This is where our carousels starts. And you see here, the mark up is very simple. It's just a unordered list with individual list items, and images inside of those.
There's only one thing you need in order to make this into a carousel inside of Foundation. And in the UL here you're going to add a data-orbit. Go on ahead and save the page. That's all there is too it. If you go on ahead and refresh your browser, you're now going to see the carousel in action. I believe the default for this is about 10 seconds between each frame. So you'll see here, we have a timer going over here on the other side, and the timer's going to go ahead and load each of these, individually,. We've got some navigation here on the left and on the right. Okay. We of course have the number of what slide we're on appear in the upper left corner, and we've got the indicators down here on the bottom where we can skip around between slides, underneath all of that. I think the carousel is one of the things that really starts to demonstrate the differences between Foundation and Bootstrap in their approach to programming.
And you can add captions to any of these individual slides that you'd like. Let's say here on slide number two, which is a picture of Hong Kong, but it doesn't have any sort of words on the slide the way slide number one does. Let's just say you want to add it here. All you need to do is add a div with a class of orbit-caption. Then you can type in whatever text you want. And then a /div. Of course you can mark this up so, you know, if you want this to be a paragraph, you can go ahead and make it a paragraph or you could make it a heading, whatever is appropriate.
This is the documentation about the HTML. And then down here on the page you scroll down to advanced, there's like two or three dozen of these various attributes that you can change inside for you carousel. They're all documented here. They've commented what each of these things do, and I believe these are the defaults here that are listed inside of this document. So you can change these however you like. So I thought I'd show you a few of these, I don't have time to show you all of them.
But you can go ahead and add, lets say, an animation and then in single quotes, the word fade. If you just add that much, the word animation colon followed by fade in single quotes. Save that and refresh your web page. And now what you are going to see is the slides fade in and out from each other rather than sliding into view. Isn't that lovely? And of course, it works great as you go ahead and navigate through these. You might also want to change the timer speed.
Right now as I said, the default's around 10 seconds. So if you would like to do that right after your animation fade, you'll want to put a comma to separate all these settings. And then you're going to say timer_speed. This is in milliseconds so if I wanted to say one second then it would be 1000. If that's the last one the last setting you're going to have in the list here, no comma after it. Go ahead and save this, refresh your page and you'll see that we're now animating much faster than we were before.
And my last little trick I'm going to show you is let's say you would like to have these little bullets down here on the bottom disappear. Obviously by default they are present but let's say you want them to go away, you can put a comma now after timer speed, and then on the next line say bullets, colon, and then false. Save that and refresh your web page, and you see that the navigation bullets down there in the bottom have indeed disappeared. So this is just a quick little bit about Orbit.
- Downloading and installing Foundation 5
- Introducing grids
- Centering columns
- Nesting grids
- Styling text, lists, buttons, panels, and more
- Adding navigation bars and dropdown menus
- Creating a responsive lightbox
- Adding an image carousel
- Integrating responsive images
- Adding tooltips