Actions

1. HTML Markup Example

back to top

Actions are added to Slide Layers as the “data-actions” attribute, and are written in JavaScript Object format, as shown in the following example:

2. Change Slides

2.1 Jump to a different Slide
back to top

To navigate to a specific slide, first add a “data-index” to the slide you wish to navigate to:

Then link to the other slide’s “data-index” in the Action’s “slide” setting (shown as “rs-2” in the example below).

  • eventmouseenter mouseleave click
  • actionjumptoslide
  • slideThe other slide to jump to (based on its "data-index" attribute)
  • delayApply an optional delay (in milliseconds) to the Action

2.2 Navigate to the Next Slide
back to top
  • eventmouseenter mouseleave click
  • actionjumptoslide
  • slidenext
  • delayApply an optional delay (in milliseconds) to the Action

2.3 Navigate to the Previous Slide
back to top
  • eventmouseenter mouseleave click
  • actionjumptoslide
  • slideprevious
  • delayApply an optional delay (in milliseconds) to the Action

3. Pause/Resume Slider Progress

back to top
  • eventmouseenter mouseleave click
  • actionpauseslider playslider toggleslider
  • delayApply an optional delay (in milliseconds) to the Action

4. Scroll Below Slider

back to top
  • Quick Tip:
    The "scrollbelow" Action scrolls the page to the content directly beneath the Slider. To scroll to a specific part of your web page, use an anchor link along with a traditional hyperlink tag instead.
  • eventmouseenter mouseleave click
  • actionscrollbelow
  • offsetScroll an additional amount of pixels
  • delayApply an optional delay (in milliseconds) to the Action

5. Show/Hide Additional Layers

back to top

The Actions below allow for controlling another Layer’s visibility.  To get started, first assign an ID attribute to the Layer you’d like to control.   In the following example, the Layer’s ID is “slide-2-layer-1”.

Next, add the Action to your button:

  • eventmouseenter mouseleave click
  • actionstartlayerstoplayertogglelayer
  • layerThe ID of the Layer to control
  • delayApply an optional delay (in milliseconds) to the Action

And then adjust the animation delay parameters and also add the “data-lasttriggerstate” attribute to the Layer you’d like to control.

In the following example, the first “data-frames” Object represents the Layer’s “start” animation, with the second representing its “end” animation.

  • delay"bytrigger" takes the Layer out of the Slide's normal timeline, changing the Layer's start and/or end animations to be controlled by an Action instead.
  • data-lasttriggerstateUse "reset" to always reset the trigger state. And use "keep" to retain the Layer's trigger state the next time the slide is shown.

6. Video/Audio

To control the current slide’s Background Video, enter “backgroundvideo” for the Action’s “layer” setting.

If the current Slide only contains one Video/Audio Layer, enter “firstvideo” for the Action’s “layer” setting.

Or enter the Layer div’s ID to control a specific Layer, as shown in the following examples:

6.1 Play/Pause Media
back to top
  • eventmouseenter mouseleave click
  • actionplayvideo pausevideo togglevideo
  • layerThe video/audio to control. Options are "backgroundvideo", "firstvideo" or the Layer's ID.
  • delayApply an optional delay (in milliseconds) to the Action

6.2 Mute/Unmute Media
back to top
  • Quick Tip:
    Use the "toggle_global_mute_video" Action to mute all Audio in the slider. Useful for sliders that include multiple Audio Layers such as background music + narration.
  • eventmouseenter mouseleave click
  • actionmutevideo unmutevideo toggle_mute_video toggle_global_mute_video
  • layerThe video to control. Options are "backgroundvideo", "firstvideo" or the Layer's ID.
  • delayApply an optional delay (in milliseconds) to the Action

7. Fullscreen

back to top

The Fullscreen Action can be used to dynamically change the slider’s Layout, expanding the slider to fill the browser’s window.

  • eventmouseenter mouseleave click
  • actiontogglefullscreen gofullscreen exitfullscreen
  • delayApply an optional delay (in milliseconds) to the Action

8. Misc.

8.1 Call an external JavaScript function
back to top
  • eventmouseenter mouseleave click
  • actioncallback
  • callbackThe external function to call
  • delayApply an optional delay (in milliseconds) to the Action

8.2 Simulate Click
back to top

If another Layer contains certain Actions, those Actions can be triggered from a separate Layer with the “simulateclick” Action.

  • eventmouseenter mouseleave click
  • actionsimulateclick
  • layerThe ID of the Layer to trigger
  • delayApply an optional delay (in milliseconds) to the Action

8.3 Toggle any given Layer's class name
back to top
  • eventmouseenter mouseleave click
  • actiontoggleclass
  • layerThe ID of the Layer to control (could also be the ID from the same Layer)
  • classnameThe class to add/remove
  • delayApply an optional delay (in milliseconds) to the Action

9. Example containing multiple Actions

back to top

The following Action combination could be applied to a “mute/unmute” button to control an Audio Layer, and then also toggle its own class for styling purposes.