22Feb

Home Page Carousel Showcase: 40+ Carousel Designs

The home page is some of the most valuable real estate on a web site. For many web sites it is still the primary point of entry for the majority of visitors.

Consequently, web site owners want to cram as much enticing content on to the home page in order to attract visitors into the site.

Because of this, the carousel has become a very popular way to showcase multiple pieces of featured content within a fixed promotional area.

Epicurious home page carousel
Epicurious has a typical home page carousel

I thought it would be interesting to showcase a variety of home page carousel designs to see what common themes emerged and also what different approaches designers took.

I have done absolutely no usability testing on carousels so I won't comment on the pros and cons of the different approaches taken, such as whether to present items horizontally or vertically, to include playback controls, and the ideal amount of content to feature for each item.

IGN home page carousel
IGN's home page carousel

However, it was interesting to note that although the number of items being featured largely varied from three to five, five is clearly the most popular number of items to feature.

I don't know why that should be the case — six or seven doesn't sound like too many to me. Maybe it has just become a convention over time as designers look at what other designers have done and follow suit.

11 Comments Posted

Strange that they would restrict it to 5, although if there is no standard for how many there should be. The sheep tends to come out in people.

5 sounds good to me, and a good way of expanding your content. I just wonder how search engine friendly it it?

Nick

1. Posted by Nick - SEO on February 25, 2008

Great post , I have used this in a couple of site that I have done.

2. Posted by web design , almog , media on February 25, 2008

Nick — not very, I would expect. However, it wouldn't be hard to put the content in a noscript tag or, better still, to use SWFObject to embed your Flash.

3. Posted by Christian Watson on February 25, 2008

I tend to think it depends on the content and the number.

btw I tend to dislike the small 'switch to next' navigation links! They really pee me off. So unusable and hard for a lot of people to use. I like the above example, nice and big!

4. Posted by Jermayn Parker on February 25, 2008

I agree, the small buttons that move a site visitor to the next button are very annoying, the Sega example above is much better. I imagine 5 is the number due to the lack of attention span of some site visitors. Great post.

5. Posted by AtomicDC, Dallas web site design on February 26, 2008

1st of all, nice post! Came here from Smashingmagazine.com

I would like to see a kind of componet to use in my website frontpage. I don't have too many programming skills to develop something like that!
Does anyone know a good frontpage carrousel? If so, pls send me a note.
Thanks,
Valdecir

6. Posted by Valdecir Carvalho on February 29, 2008

Very nice post. I totally agree.

I made an post about web design on my blog that i think would be interesting.

7. Posted by Per Ove on March 02, 2008

I definitely like the idea of the carousel, anyone know of something freely available? Slideshow pro I guess is the closest thing but that's paid for.

8. Posted by Interactive Red, Web Design Brighton on March 05, 2008

5? Eris :) Very interesting short article. Thanks.

9. Posted by Greg Frey Website Designer on March 07, 2008

I don't know about this great idea to combine the content of a website with an image on the homepage. Thank you for this great article to help me much more understand round of webdesign ;)

Ralph

10. Posted by Ralph on March 26, 2008

Just finished something like this on our go media website on the homepage. Took a while to get right but i like the effect.

11. Posted by web design leeds on April 18, 2008