Best Image Carousel Ever

The virtual client for my fourth sample, Ristorante del Teatro, pays no dues to design convention, but knows how to market simply and effectively.

Indeed there is practically no interface here, no buttons, only the page to scroll. The interaction is directly with the content, the image carousel, and a call to action in the shape of a table booking form.

We all know how an image carousel usually works. This one is 100% my own work, and unlike most carousels I’ve seen, it has all the features one would expect:

• Images can be navigated with left or right arrows, or with arrow keys on the keyboard
• The dots on the control strip show which photo in the sequence is displayed
• When the last image is reached by any means, including user actions, the show starts again from the beginning
• Hovering the mouse over the dots shows a thumbnail, helping to avoid “missed clicks”
• When an image is shown due to user action, it remains still for 15 seconds, then the slideshow starts again
• When the browser window is inactive, the slideshow stops
• The slideshow also stops if the page is scrolled down by 400 pixels or more, preserving battery power on mobile devices

On mobile phones the control strip disappears, but the user can still click the arrows. Overall, the design is 100% responsive, looking good on devices of all sizes.

This sample is a tribute to the late Richard Niasi, who in 2007 took up my offer of free photos of his inimitable Papageno and Sarastro restaurants in London’s Theatreland. I’m not sure the photos were ever used, old “King Richard” probably just liked to help an artist building a portfolio. The photos are from those two restaurants. Sadly, Papageno is no more, but Sarastro continues.

Another thing notable in this sample is the table booking form. It features a calendar date picker that I forked and adapted from Chris Hulbert’s Javascript Date Picker. I enlarged it slightly to make it more readable, and modernised the interface by exchanging base64-encoded images that were used in the original for pure CSS styling code.

This date picker is an excellent piece of code as Chris Hulbert created it for the right reasons; it is light, cross-browser, and does not rely on third-party libraries.

Stay tuned for the fifth sample; with a bit of luck, it just might come from a paid gig.