Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Exporting graphics from Photoshop
- Positioning elements with CSS
- Using the Roundabout plug-in
- Activating the carousel callback
- Detecting the image in focus
- Adding the final touches
Skill Level Intermediate
Now that you have completed the carousel course, I based this course on a plug-in by Fred LeBlanc. He gave us permission to allow us to use this plug-in in the downloads as well. And if you go to Fred's site, which is FredHQ!, in the lower right-hand corner there's a bunch of projects, and the first one here is Roundabout. When you go to the Roundabout homepage there are a whole bunch of different settings that you can put into Roundabout plug in. Right on the homepage he has some features here which allow you to click and drag, and this also works on touch devices. And in addition, all of the API is documented here, so some of the features that we added in, things like callback functions and start on first child, are all documented under the API settings down here.
Now in addition to all of the other capabilities of this particular plug-in, you can also add other custom jQuery statements into your project as well. So if we go back to the photo gallery course that I have up on lynda.com as well, one of the things we added into this particular piece was the ability to have a lightbox so I could click on an individual item and get more details in a larger image. One thing you might want to consider is adding a lightbox into your carousel, so maybe inside of the caption area you have a button that says "see larger" and you pick the same carousel item and show a larger version of that as well.
And this would give you a combined interactive experience of both the carousel and a lightbox. And with that, I wish you all the luck on your new carousel projects.