Image Carousels

Image carousels aren't anything new. They come in many styles, and are useful for showing off imagery in the background while the user goes about their business on your site. They're quite flashy and tend to be the centerpiece on many websites' home page. Their effectiveness is limited, however, so one should be mindful of when to appropriately use one (if at all).

So when should one consider using an image carousel? It's a delicate balance between displaying a lot of information in a small space that you feel is important for the user to glance at, and overloading the user with too much information, making them disregard the image carousel entirely. Be mindful not to use it where it may distract from other content within the web page, since it is visually eye-catching.

Lastly, don't expect your users to rely on the image carousel for getting to the features that you want them to see. Image carousels should be considered to be as nothing more than decorative elements on your website, serving only to accentuate the more important and prominent content on the web page.

So why did I bother creating an image carousel? Well, I simply felt like trying it out. I put this image carousel together from scratch - with NO outside plugins of any sort. All of the images used are from those wonderful animated films made by Pixar and Disney. It's rather dynamic in nature. I could bore you with some of the heavy details going on behind the scene, but that would take a lot of time to explain. So why don't you just play around with my image carousel instead? That sounds like it'd be more fun than reading a lecture.

Try changing the size of your browser window. You'll notice that my image carousel will auto-adjust its size based on your browser's current size. To pause the image carousel on an image, just double-click on its corresponding circle along the bottom of the image carousel. Try playing with the Image Transition Mode buttons along the right-hand side of this web page. Pretty spiffy, eh?

Image Transition Mode:

  • Static
  • Fade I/O
  • Slide-In