DMXzone Slider Manual

Advanced: Controlling HTML5 Slideshow with DMXzone Slider

In this tutorial we will show you how to control the HTML5 Slideshow with DMXzone Slider.

*You can also check out the video.

How to do it

1. We've already inserted the HTML5 Slideshow that contains 17 images. Outside the slideshow, click on your page and open the DMXzone Slider window.

2. In the DMXzone Slider window we set the width to 600px (1) so it matches our HTML5 Slideshow size. The minimal value for our Slider should be 0 (2) as this is the first slide of the HTML5 Slideshow.

3. We set the maximum value to 16 as this is the number of the slides in our HTML5 Slideshow. When you're done, click OK.
   
   

4. Now we're going to connect the DMXzone Slider with the HTML5 Slideshow. Click the Add/edit behaviors button.
   
   

5. From the DMXzone folder, choose Control HTML5 Slideshow behavior (1), select the When handle is dragged action (2) and add the selected behavior (3).

6. In the Control HTML5 Slideshow window select Go to slide item (1) from the Action menu and enter #value# in the number field (2). This mask returns the current value of our slider. When you're done, click the OK button.

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