How to create a Carousel in a webpage

The latest fad is to create Carousels to display images, and allow for easy navigation.  I have not been able to find any .NET controls to enable you to create a Carousel on a web page.

ERROR - UNABLE TO LOAD CONTROL : ~/User controls/carousel.ascx  

So I set myself the task of generating a web page control to allow for easy, managed code, configuration of a Carousel Control in .NET

First I went on the hunt for a simple javaScript Carousel that I could use, I found a lovely Carousel by Doug Greenall, the information on his blog goes in to great detail of how the Carousel works, but this was not intention to go in to detail about the inner working of a Carousel.

So I downloaded Doug Greenall's Carousel and then went to adapt the javaScript code to create a single DLL Control that could be reused.

The end product is a small DLL that can be dragged and dropped in to your ASP.NET application or Website

Carousel.dll (21.50 kb)

The project solution was generated using Visual Studio 2008 Pro,with a Target Framework of ".NET Framework 2.0"

Carousel.zip (191.73 kb)

 

How to use the Carousel

Okay, so now I've built the Carousel Control, you now want to to know how to use it?

  • First create a new WebSite
  • Add the Carousel.dll or a project reference to your website
  • On the web page register the control (or add it to your web.config)

  • Then add the control to the page, as seen below

 

  • Next in the code behind you need to add to the CarouselDetail collection, which will add the images, links to the Carousel

 

And that is it, the more you add to the CarouselDetail collection the more items will appear on the Carousel.

blog comments powered by Disqus

About the author

You have probably figured out by now that my name is Bryan Avery (if not, please refer to your browser's address field).  Technology is more than a career to me - it is both a hobby and a passion.  I'm an ASP.NET/C# Developer at heart...

Month List