Image carousel: a different type of movement control

This is the third tutorial in the series on using the Roundabout plugin for jQuery. It builds on code and concepts introduced in the first and second tutorials, so if you haven't gone through them already, I suggest you do so now, as I'm not going to explain those things again.

In this tutorial, I'll be walking you through a different way of controlling the movement of the image carousel, like in this example. Hovering over the various arrows causes the carousel to turn smoothly in different directions at different speeds.

Image carousel: controlling the movement

This tutorial is going to build on my last tutorial, where I showed you how to create an animated image carousel. I'm now going to show you how to add buttons that will control the movement of the carousel, like in this example. If you haven't gone through my previous tutorial, do that first, as I'm not going to go over the process of building the basic carousel again. If you've got the carousel from the last tutorial already made, then let's get going.

Image carousel: the basics

This is going to be a short post to introduce you to a useful jQuery plugin that goes by the name "Roundabout". This will be the first in a series of posts exploring what we can do with this plugin, and hopefully teaching a bit more about various aspects of JavaScript/jQuery along the way. The purpose of Roundabout is to create a 3D animated image carousel, like the one in this example (click on the images that aren't at the front to bring them to the front).