And I'm going to indent this code just a little bit, to keep it easy to read. And then we'll close that div down here as well. Alright, then the next thing we're going to do is add one more div after that, and that div is going to have a class of orbit-wrapper. We're going to close that div down here, just inside of the view all. And so, that attribute, data hyphen anything, as I've said, is the HTML5 way of binding JavaScript to this particular HTML element, and in this case, we're binding the Orbit script to what's going to happen inside of this div. So again, that has to do with accessibility. And aria-label equals quote Wedding Cakes. 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. 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. In other words, words that we're going to want to appear on top of the picture as part of this process.
#Instafeed foudnation 6 orbit plus#
So we have an image plus a figure caption. 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. 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. I've added a few things to this particular file, including navigation and then the photos for the wedding cakes. 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. We are going to add the required markup in order to turn this into an image carousel. 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. 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. You'll notice we have arrows for clicking through the images, we have dots for dot-based navigation through those images as well. So that is the name of their carousel, you won't find it listed as a carousel in their documentation, you need to look for Orbit, it's in the media section of the navigation, and if you scroll on down here, you will find an example of the slideshow carousel here. If you take a look at the Foundation documentation, the carousel is called Orbit. It's also responsive and it works on touch devices as well as on desktops. Foundation comes with a nice JavaScript plugin that will allow you to achieve this slideshow quickly and easily. It seems like everywhere you look, someone else has posted a bunch of slides that rotate on their homepage.
0 kommentar(er)
