Creating a Photo Slide Show in HTML

Written by: Profacgillies • Edited by: Michele McDonough
Published Feb 6, 2010 • Related Guides: HTML | CSS

Do you want to know how to make a photo slide show in HTML without using Flash or any fancy tools or technologies? This article shows one approach built around the CSS overflow property.

How to Make A Photo Slide Show in HTML Without Using Javascript, Flash or Other Tools

There are lots of tools and applications – some free, some paid – which create photo side shows or photo galleries. Elsewhere I have shown how to create a photo gallery which uses the visible css property to provide a degree of animation and how to use use a low-cost application. Here, I will describe an approach that produces a slide show using only basic HTML and very simple CSS.

Using the CSS Overflow Property

My earliest memory of photographic slides was my father's slide projector which operated on the simple principle that you fed a single slide in from the left and drew it across behind the lens and then pulled it out on the other side.

This first solution uses the CSS overflow property to achieve a similar result in HTML.

The slide show looks like this:

click to enlarge

The html to create this page is shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>How to Make A Photo Slide Show in HTML</title>

</head>

<h1 style="color:white;font-family:Cambria, serif;font-size:18px;">A Photo Slide Show in HTML </h1>

</tr>

</table>

</div>

</body>

</html>

I have left the CSS information as inline tags to make them explicit. You should be able to copy and paste this HTML into a text file and view it with your browser, although you will need to find your own images!

The key elements are:

The <div>….</div> tags act as a container. The width is set to 1000 pixels. The overflow property means that the contents will scroll, allowing each picture to be seen by using the scroll bar.
The overwide table is set to a width of 7500 pixels, or 10 times the cell width of 750 pixels.
Within each cell, a picture is centered vertically and horizontally, each 750 x 600 cell contains an image at 640 x 480 pixels.

Possible refinements

You can set the widths to match your image size and the table width to match the number of images you wish to see.

You can set the background to a color of your choice or a texture if preferred.

In a live site, I would move the CSS information into an external style sheet. This way, you could create a series of pages all linked to a contents page.