How to Create a Slideshow with HTML5 Slideshow Maker
Instead of using flash photo slideshows, you can use HTML5 photo slideshows to extend your photo slideshow visitors to mobile device users. HTML5 photo slideshows can work on not only computers but also iOS mobile devices, Andriod mobile devices and Windows devices. With the HTML5 templates in HTML5 Slideshow Maker, creating a slideshow becomes quite easy. Here we share you the HTML5 tutorial on how to create a slideshow with HTML5 Slideshow Maker.
It's a piece of cake to create a slideshow with HTML5 Slideshow Maker. To get prepared, all you need are below:
- A PC running Windows 7/8/ XP/ Vista or Mac;
- Photos that you want to create a slideshow with(JPG, GIF, PNG, etc.);
- HTML5 Slideshow Maker;
Let's Start The Three-Step HTML5 Photo Slideshow Creating!
HTML5 Slideshow Maker was designed to offer the most intuitive way to create HTML5 photo slideshows. The following HTML5 tutorial is detailed. Users can try to create a slideshow while reading this HTML5 tutorial. The interfaces of the Windows version and the Mac version are the same, so the following HTML5 tutorial is wrote for all HTML5 Slideshow Maker users.
Step 1. Organize photos to HTML5 Slideshow Maker
After you open HTML5 Slideshow Maker, you'll notice that there are some photos on the lower panel. These photos are added by HTML5 Slideshow Maker. Above these photos, there are three buttons: "Add", "Remove", and "Remove All". To make your own photo slideshow, you need to click the "Remove All" button first. Then you can use the two middle panels to explore photos. After finding photos, you can start importing them to HTML5 Slideshow Maker.
There are two ways to import photo one by one to HTML5 Slideshow Maker. They are: double click the photo; click the photo and then click the "Add" button. To add many photos at a time, you need to click the folder in the right panel and then click the "Add" button. A pop-up window will show up and you can press "Ctrl" and "Shift" to help you add more than one photo at a time.
Step 2. Customize transition effects, add properties, and choose a theme
1) Customize transition effects
By clicking the "Transition Effect" tab, you'll come to the interface for customizing transition effects. HTML5 Slideshow Maker automatically adds different kinds of transitions to your photo slideshow, so you can skip this interface if you do not want to customize the transition effects. The customize settings include setting particular transitions to particular photo slides, setting transition duration and photo duration.
2) Add properties
Under the "Properties" tab, you edit image titles, add descriptions and hyperlinks to each photo slide.
3) Choose theme
HTML5 templates are placed under the tab "Theme". By clicking the "Theme" tab, you can see the HTML5 templates. HTML5 Slideshow Maker offers plenty of gorgeous HTML5 templates. The number of HTML5 templates increases with its updates, and the full versions provides more cool HTML5 templates than the free versions.
The properties panel on the right is for customizing the HTML5 template you choose. Customize settings including: HTML title, width, height, frame rate, background color, play mode, etc.
Step 3. Publish photo slideshow
The last step is publishing the photo slideshow. You need to click the "Publish" tab to come to this step.
Now you can start making an HTML5 photo slideshow by following the above HTML5 tutorial and then share it by embedding it to your own website, blogs, or sending to friends via emial. Our another tutorial is How to embed an HTML5 photo slideshow to website, you may read it to help you in the embedding photo slideshow issue.