Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,971 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding the difference between default and fluid grids
- Nesting with fluid grids
- Creating a thumbnail gallery
- Adding block quotes and lists of text
- Incorporating images and icons
- Adding breadcrumb navigation and pagination
- Using tabs and pills navigation
- Adding dropdown menus to the nav bar, tabs, and pill
Skill Level Beginner
So if you take a look at your starting Carousel document, you will notice that we have some photos here. They have a little bit of text that go underneath of all of these. There is down here at the bottom some tiny little left and right arrows, and if we take a look at this in Dreamweaver, you'll see that that code is exactly the same. We have some images, we have some headings with little bit of text underneath, and then down here at the bottom we have little left and right arrows. Now what we need do is mark this up to make it all work for the carousel.
So first of all, the easiest thing to add are some divs here which will designate where the captions for this carousel are going to be. So just after the image, before the h4, we are going to add a div with a class of carousel-caption. And then of course, after the last closing paragraph, make sure you close the div. And I am going to do that three times here, div with a class of carousel-caption, and one more time, div class carousel-caption, /div. Okay.
So we have marked off where those carousel captions are going to appear, now we have basically a unit that occurs here, the image plus the carousel caption, that is all a grouping itself. So I am going to add another div for that, this is a div with a class of item, and I am putting a little bit of spacing between each one of these groupings just to make things a little bit easier to read, div class item, one more up here on the top.
You will notice that once again, as I have done with many of the other videos in this title, I am not using the grid system here for displaying this carousel. Of course, you could take the code that I am going to put here in between the body tags, you could copy that into one of the columns inside of your grid to display on your website. That's a very simple thing to do. The other thing I want to add here for the very first item is I want to designate this as an active item. In other words, I want the carousel to start with the first one.
So I am going to designate it as such. Now I need to add just two more divs. I am going to wrap everything that you see here in another div with a class of carousel-inner, scroll all the way down to the bottom, and we are going to close that tag just before the href down here in the bottom of the screen. Then just above that div with a class of carousel-inner, as you might expect since it was called inner, we have to have an outer one, right? So I am going to add one final div here to the mix.
This will be div with a class of carousel. And then I am going to close that all the way down here just after the hrefs down here in the bottom, which will be that little arrow either way. Okay, in that div with a class of carousel, also give it a class of slide. This will cause the images to have that wonderful sliding effect from one to the next. Without the class of slide, what will happen is they will simply appear one after the other.
And I am also going to give this an ID of artists. All right! So that's all the markup that we need for the actual content of the carousel. Now we are going to scroll on down to the bottom of the page where we have these links with the left and right arrows, and we are going to apply some additional classes and information down here. So for our left quote, let's go ahead and apply some styling to this. We give it a class of left as well as carousel-control.
And last of all is the action here that we have to have on this href, and in this case it's data-slide, and that will be previous, P-R-E-V ,for the first one and data-slide="next" for the last one. All right! So now that we have got all that information packed into these a tags down here at the bottom of the screen, we are ready to save our document. So Ctrl+S or Command+S to save the document.
Go on down here to Firefox and refresh your page, and you should see a fully formatted carousel. It does stretch all the way across the page, that's because, of course, the containing element for this particular page is the body tag. I don't have the scaffolding in place to make this carousel smaller or larger. If I click my arrows here, you can see that the images jump in between just fine. Isn't that great? And of course, we have the text underneath, describing each one of our images.
So the image carousel is a great way to show off photos on your website, add a little bit of sizzle and interactivity, and they are very fun and interactive.