A sample JQuery Carousel

I recently had to display pages of commercial flyers on a Carousel, where they could be flipped over. After some research I found Chris Coyier's blog and his excellent JQuery plugin that allowed me to implement my own carousel. He baptized his JQuery plugin as Moving Boxes and you can find his introductory article here and a live running sample here.

The idea is to render an unordered html list (<ul>) where each list item (<li>) contains an image inside. The ul  item must be identified with an id attribute and then the .movingBoxes function is applied to that element.

For this article I created a small MVC 3 app where images of a few cities are displayed on a carousel. The cities were saved in a Cities table in a SQL Express database as follows:

This table is accessed via EntityFramework inside the Controller action:

The Razor View receives the List of Cities and displays them using the Razor syntax by looping through the items on the List:

And finally the magic happens by applying the .movingBoxes function to the html element whose id is 'slider', which is our <ul> that will function as the carousel container:

Of course in order to execute the .movingBoxes function you need to import Chris's jquery.movingboxes.js.

This is the final result in my sample app. Of course this is just a static screenshot. For the functional page, download the project source code at the end of the article.

Chris has done an excellent job with this simple yet effective Carousel. Kudos to him for that and my personal Thanks.

Download sample code of the project