Join Chris Converse for an in-depth discussion in this video Adding carousel images and captions, part of Create a Rotating Carousel with jQuery.
Now, all of the data we are going to use for the carousel is going to be in the HTML page, and we are going to put it inside of this div that we put a class on called carousel_data, and then later on we will actually hide this with CSS. Now I have already gone ahead and created all of the data for the carousel and I have put that into the snippets file inside of the exercise files. So inside of Aptana, let's come up to File. Let's choose Open File. From the desktop let's go into the exercise files and let's open Snippet.html and then click Open. So what I have inside up here is each carousel item is in a div with a class of carousel_item, and then there is a div inside of there called image and another div called caption.
Let's switch back to carousel.html. Let's come down inside of the div that's got the class carousel data. Let's come in here and then paste all of this markup inside of the carousel data div. Let's choose File > Save. Let's come back to our browser and hit Reload. In our browser, we will actually see all of this individual data, and we will leave this showing for the time being, so we can see when the carousel builds that it actually is building off the data that we just pasted in. So now we can see all of teapots and all of the corresponding captions. In the next movie, we will start by creating some scripts to actually start creating our carousel object.
- Exporting graphics from Adobe Photoshop
- Positioning elements with CSS
- Using the Roundabout plug-in
- Controlling the carousel with custom buttons
- Detecting the image in focus
- Adding the final touches