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).

Animated drop-down menu

Drop-down menus are a common feature of site navigation, and having them slide up and down or animate in some other way adds a nice touch. It is, however, trickier than you might think to get them to behave as you think they should. In creating the example for this tutorial, I had, at various times, menus that wouldn't slide down, wouldn't slide back up, got stuck half-way, or bounced up and down like a yo-yo long after I'd moved my mouse off them. If you follow along with my tutorial, you should hopefully be able to avoid similar problems.

A fancier slideshow: thumbnails and a moving highlight

Two weeks ago I showed you how to create a simple image slideshow for your web pages. Last week, I showed you how to create an animated link highlight that responds to the mouse hovering over links. This week, I'm going to show you how to combine those two to create a fancier slideshow, like this example.

Hover animations and a sliding highlight

I said I would do a follow-up post on the Cycle plugin, and I will probably do that next. First, I want to explain how to do a graphical gimmick that I've used several times in conjunction with the Cycle plugin, as well as on its own. In the process, I'll try to show you how to do simple animations with jQuery.

Basically, I'll be showing you how to create a sliding highlight, like this example or the one on the navigation of my personal site. In either one, hover over the links to see the animation. Neat, huh? More interesting than just making the links change color or become underlined when you hover over them, and not too difficult to implement (or at least, it shouldn't be once you've gone through this tutorial).

Starting simple: a basic slideshow

A slideshow is a very common feature on web pages, and one that isn't hard to implement. For someone who's just starting out in the wonderful world of web design, though, trying to add something like this to your new site's home page could be daunting. Googling "web page slideshow" or something like that will return a massive number of results. There are probably hundreds of different ways to accomplish this goal, using a variety of different technologies. I'm going to show you one of the easiest.