How to Make HTML5 Image Slideshow
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.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>An HTML5 Slideshow w/ Canvas &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.
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.
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
- How to Create HTML Slideshow
- How to Make Slideshow in Flash
- How to Create SWF Slideshow
- How to Create GIF Slideshow
- How to Make Photo Slideshow