Interactive Slideshows

A PaneFlow slideshow does not have to play start to finish. Any block or element can respond to a click - jump to another pane, open a link, start a download, or call your own function. That one control, "On Click Action", is what turns a slideshow into something closer to an app: clickable hotspots, tabbed showcases, branching quizzes.

#The On Click Action

Select a block or an element and open the "On Click Action" group in the settings sidebar. The options:

  • None - the default, no response to clicks.
  • Open URL - open a link (in a new tab in the deployed slideshow).
  • Go To Pane - jump to a specific pane. This is the one that unlocks non-linear navigation.
  • Next Pane / Previous Pane - step to the next or previous pane.
  • Download File - start a file download. The file must be hosted on the same origin as the slideshow (or a PaneFlow CDN URL); it will not work through an iframe embed.
  • Call Global Function - call a JavaScript function on the embedding page by name. Use it to hook the slideshow into your site: open a signup modal, scroll to your pricing section, fire an analytics event.

#Click a Block, or an Element

You can wire the whole block or a single element. For cards, tiles, and answer buttons, wire the block so its entire area is the click target - it is the bigger, more forgiving hit area. Wire an element when only that piece should be clickable. If both a block and an element inside it have actions, the element wins and stops there - it does not also trigger the block.

#Go To Pane: the Interactive Unlock

A linear slideshow advances one pane at a time. "Go To Pane" lets a click jump anywhere, so panes become destinations rather than a fixed sequence. That single idea powers a whole family of interactive layouts:

  • Hotspot tour - markers placed on a product image, each jumping to a detail pane, with a "back" affordance that returns to the overview.
  • Tabbed showcase - a tab bar that persists across panes, each tab going to its pane, with the active tab styled per pane.
  • Branching quiz - answer cards that each lead to a different result pane, with a "retake" that returns to the question.

The common thread: a hub pane offering choices, detail panes as destinations, and a clear way back. Map every pane so nothing becomes a dead end.

#Turn Off Autoplay

An interactive slideshow should wait for the viewer, so switch "Autoplay" off in Project Settings. Keep "Pagination" or "Navigation Buttons" on if you still want manual linear paging alongside the wired clicks, or turn them off to make clicking the only way through.

#Notes

  • "Next Pane" and "Previous Pane" respect "Loop Mode": with loop on, Next from the last pane wraps back to the first.
  • "Open URL" and "Call Global Function" do nothing on the editor canvas - open the Preview or the deployed slideshow to test them.
  • For "Call Global Function", define the function on the page that hosts the embed (window.yourFunction = () => { ... }); PaneFlow looks it up by name and calls it with no arguments.

#Next