Home > Resource > Make Photo Slideshow > HTML5 Slideshow

How to Make an HTML5 Slideshow

HTML5, as the next generation web standard, is around the corner. Would you add HTML5 support to your website? Maybe it's time at least to prepare. This article will show you 2 ways to make HTML5 slideshow and embed to your website.

Self-running HTML5 Slideshow

One of the biggest upgrade of HTML5 is that you can directly embed and play videos online by using. This way, the visitors can watch the HTML5 slideshow as long as their browser supports HTML5. No Flash player required. Since the HTML5 has not come to its final version, video codec could probably use WebM, H264, Ogv or both.

Here is how you can embed an HTML5 slideshow video:

<video poster="movie.jpg" controls> 
    <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/> 
    <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/> 
    <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>

If you can see the video below, your web browsers support HTML5, too. Nowadays, most browsers support HTML5 slideshow already. See more details about HTML5 browsers.

HTML5 slideshow video created with DVD Slideshow Builder Deluxe - More than 100 transitions included.

Now what you need is only an HTML5 slideshow software and create slideshow video in MP4 (AVC) format.

Download Win Version

Interactive HTML5 Slideshow

Like the currently used Flash slideshow on websites, you can also design an HTML5 slideshow without install anything. Of course, you don't have to write codec yourself. Here we take a widely shared HTML5 slideshow online for example to show you how to embed an HTML5 slideshow.

1. Put files in the right place.

When you downloaded the HTML5 project file from here, unzip the file to your computer, and move or upload to the folder of your website.

html5 slideshow

There are also other people to share their HTML5 slideshow project online. Google for one and change to suit your needs. It's better to put copyright notice to thank others' work, or follow the license statements.

2. Change code to suit your needs

Usually, you don't need to change the code of css and js files, except the link address if you have put them in a different folder. For example, you should change the css file link address to 'scripts/script.js' if you have moved script.js file into an existing folder called 'scripts'. This type of link address is called relative link, while another type is absolute link, such as http://yoursite.com/scripts/script.js. If the HTML5 slideshow is embed to a page in a folder, you should use something like '../scripts/script.js'. You'd better use absolute link if you are not familiar with the differences.

The most important part of this HTML5 slideshow is marked in the red box. Copy these codes into any page you want HTML5 slideshow to display and change the image address like described above.

html5 slideshow code
Click to enlarge.

3. Preview with HTML5 browsers

Lastly, see how the HTML5 slideshow looks like in your HTML5 browser. Normally, you will get  this HTML5 slideshow. On the page, you could also download HTML5 slideshow files and see the detailed process to design it by Martin Angelov.

Also check out Flash slideshow templates to make website slideshows in clicks.

Product-related questions? Speak directly to our Support Team >>