HTML5 Parallax Slider Manual

The Basics: Basic Usage of HTML5 Parallax Slider

In this tutorial we will show you how to use the HTML5 Parallax Slider and the basic features packed in it.

*You can also check out the video.

How to do it

1. Click the Insert button (1) to add the HTML5 Parallax Slider (2) to your page.

2. Now, we will change the size of our Slider by adjusting the width and height (1) and select the Light design (2) from the drop down menu in the Property inspector.
    

3. For this tutorial we choose the Horizontal direction (1) for the slides move and leave the default slide and effect duration speed (2).

4. You can customize the appearance of the slider and the play options, which we will leave by their defaults.
   
   

5. In order to add a background image for the first slide, select Slide 1 (1) and click Add new image button (2).

6. In the choose a file window, select the image and click OK.
   
   

7. Now, we're going to add an image element to the same slide.  Select the default element (1) and delete its default content (2).

8. In the insert menu (1), go to the image menu item (2).

9. In the select image source window, choose the desired image.

10. You can resize (1) the Slide Element and drag (2) it to any position within the slide. You can also set a specific size (3) from the property inspector, and change the Z-index (4). The higher the z-index is, the faster the elements speed is.

11. You can add a background image and a background color (1) to the slide elements. Also, you can customize the Incoming and Outgoing Delay (2) for each of the slide elements as well as the Incoming and Outgoing effect Duration (3).

12. Now, we're going to add a new slide element and in order to do that, click the Parallax slider (1) and click the add element button (2) in the property inspector.

13. For the new element, we do the same in order to customize its content and appearance.

14. Now you can save your work and preview the result in the browser.