Create a Play/Pause Button for Slider Progress or Videos

For this tutorial we’ll use Static Layers with Toggle Content and Layer Actions.

  • Slider Progress
  • Video
  • Enable/Disable Autoplay
    Before setting up your Play/Pause button, decide if you’d like your slider to change slides automatically.
1. Visit the Static Layers Slide

2. Select a regular slide for the editing canvas’ backdrop

This allows you to see what the Play/Pause button would look like when placed on top of one of your slides, as Static Layers will always appear on top of all other slides.

3. Add a Text/HTML Layer to the editing stage

4. Enable “Layer Toggle Mode” for the Layer

5. Add a Pause Icon for the Untoggled State and a Play Icon for the Toggled State

6. Adjust the font-size of the Layer to increase/decrease the icon’s size

7. Set the mouse cursor to “pointer”

8. Add a “Toggle Slider” Click Action

Demo Content One click

If you’re looking for the demo contents, you can get them here