How to Make HTML5 Image Slideshow

Maybe showing slide show of images using HTML5 is not a fresh message for you. But it is a bit hard to make HTML5 photo slideshow with code. As I know, with JavaScript you can apply a special filter to every image in the slideshow and create a new version of the images, with higher contrast and more vivid colors, and store it in HTML5 canvas elements.Some of JavaScript beginners may be looking for the HTML5 slideshow code.

Here I will show you how to create an HTML5 slideshow with JavaScript.

1

Find the HTML5 slideshow code

To create HTML5 image slideshow, the first thing is laying down the HTML markup of the page. You can build a new HTML page and copy the following HTML5 slideshow code to start generating your HTML5 picture slideshow.

html5-slideshow.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An HTML5 Slideshow w/ Canvas &amp;amp;amp; jQuery | Tutorialzine Demo</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="slideshow">

    <ul class="slides">
        <li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam" /></li>
        <li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach" /></li>
        <li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>
        <li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
    </ul>

    <span class="arrow previous"></span>
    <span class="arrow next"></span>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Or you have another method to get the code including HTML, JS and CSS files. Download an HTML5 project file online to your computer, unzip the file and upload it to folder of your website.

2

Change code for your own HTML5 picture slideshow

To build your own slideshow, you need change the slideshow code by modifying photo address. It is marked in the red box.  You can modify it with your own image addresses.

If you have downloaded the HTML5 project file, you just modify the link address and don't need to change the code of css and js files. You need 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.

3

Preview the HTML5 slideshow with HTML5 Browsers.

Now you have finished your HTML5 slideshow and you can choose the useful HTML5 browser to preview it.

However, above way is too difficult for those who cannot understand any code. If you have no any code experience, I recommend you use Kvisoft Slideshow Photo Software which is also an easier HTML Slideshow Creator for you. With this slideshow program, you can create flash image slideshow in few clicks.

Related Tips and tutorials

Add New Comment

comments powered by Disqus