Question

Can you explain to me, at a very high level, what I would need to build an image carousel for the web, please. You can use data structures and general computer science terminology – but nothing language specific.

E.g:

1. Store all the images in an array or linked list
2. When the carousel is loaded, resize the displayed images as X% window size
3. When the next button is pressed, imageA moves to a hidden html element.

Et cetera.

I hope that makes sense.

Thanks.

Answer 1

You don’t want anything language specific but you want to know about carousels on the web and you’ve tagged this with ‘html’ and ‘css’ so I’m going to assume that I can talk about HTML and CSS but I’ll try to keep it high level.

If we ignore Flash, then you’re left with HTML + CSS + Javascript. The common way to do this is to arrange the images or their thumbnails (don’t resize via HTML – its doesn’t look good and can increase your page load time) in HTML elements that are themselves contained in one or more layers of wrapping elements. So the whole set of images strung together might be wider than the viewing window. CSS is used to manage their exact layout and to keep them from overflowing the viewing window. When I say window, I just mean the portion of the page in which you want the carousel to appear. Then Javascript is used to change the CSS properties of one of the HTML elements that is wrapping the images, causing it to scroll or shift position.

With HTML5, you have more options, but the above is the way things have usually been done until now.

Finally, if you are going to actually implement this, there are a number of scripts available that will probably meet your needs, but if not I highly recommend using a Javascript framework like JQuery – it will make things much, much easier.