SlideShow, Order & Progress Panel

• SlideShow, Order & Progress Panel
• SlideShow Tab
• Progress Bar Tab
• Duration & Init Tab

SlideShow, Order & Progress Panel

The SlideShow, Order & Progress panel is accessed by going to the Module Editor, then the Top Bar, then clicking the Settings button to open the Settings Sidebar, and finally clicking SlideShow, Order & Progress.

In the SlideShow, Order & Progress panel you can configure automatic slide progression, loop behaviour, an optional progress bar display, default slide duration, slide order, and module initialisation timing. The panel is split into three tabs.

• SlideShow ¹
• Progress Bar ²
• Duration & Init ³

SlideShow Tab

In the SlideShow tab configure automatic slide progression, loop behaviour, and hover pausing.

Auto Progress (Toggle)

Controls whether the module automatically advances through slides without any user interaction.

Options:

• _On: Slides advance automatically on a timer.
• _Off: Slides do not advance automatically and remain on the current slide until the user navigates.

Loop(s) (Dropdown)

Sets whether the slideshow loops indefinitely or plays through a set number of times before stopping.

Options:

• _Infinity: The slideshow loops indefinitely without ever stopping.
• _{Loop Amount}: Reveals a number input. The slideshow plays for the specified number of loops before stopping.

Loop Amount (Number, range)

Sets the number of times the slideshow loops through all slides before stopping.

Options:

• ₀: Minimum. The slideshow does not loop at all and stops after the first pass.
• ₁₀₀₀: Maximum. The slideshow loops up to 1000 times before stopping.

Stop at Slide (after Loops) (Dropdown)

Sets which slide the slideshow rests on after the specified number of loops have completed. Options are dynamically populated based on the number of slides in the module.

Options:

• ₁ through _N: The slideshow comes to rest on the specified slide number once looping is complete.
• _{Last Slide}: The slideshow comes to rest on the last slide in the module once looping is complete.

Pause on Hover (Toggle)

Controls whether auto progress is temporarily suspended while the user’s cursor is over the module.

Options:

• _On: Auto progress pauses when the cursor enters the module and resumes when it leaves.
• _Off: Auto progress continues regardless of cursor position.

Progress Bar Tab

In the Progress Bar tab configure an optional progress bar that displays auto progress status.

Active (Toggle)

Controls whether a progress bar is rendered on the module to indicate slideshow progress.

Options:

• _On: The progress bar is enabled and its configuration settings are shown.
• _Off: No progress bar is displayed and all configuration settings are hidden.

Show Progress of (Dropdown)

Sets whether the progress bar measures the remaining time of the current slide, or the overall progress through all slides in the module.

Options:

• _{Focused Slide}: The progress bar fills and resets with each individual slide’s timer.
• _{Full Module}: The progress bar fills continuously across the entire run of all slides, reaching full only at the end of the final slide.

Progress “Bar” Type (Dropdown)

Sets the visual shape and fill direction of the progress indicator.

Options:

• _{Horizontal Bar}: A rectangular bar that fills from left to right.
• _{Vertical Bar}: A rectangular bar that fills from bottom to top.
• _{Clock Wise Circle}: A circular arc that fills in a clockwise direction.
• _{Counter Clock Wise Circle}: A circular arc that fills in a counter-clockwise direction.

Gaps (Toggle)

Controls whether visible gaps are inserted between the progress segments that represent each individual slide, dividing the bar into distinct sections.

Options:

• _On: Gaps are shown between progress segments, visually separating each slide’s portion of the bar.
• _Off: No gaps are shown and the progress bar appears as a single continuous track.

Gap Size (Number, pixels)

Sets the width of the gaps between each slide’s progress segment.

Options:

• _0px: Minimum. No gap is rendered between segments.
• _100px: Maximum. A gap of up to 100px is rendered between segments.

Gap Color (Color Swatch)

Sets the color of the gaps between progress segments.

Style Section

In the Style section configure the thickness, corner rounding, and colors of the progress bar.

Strength (Number, pixels)

Sets the thickness of the progress bar, i.e. its height when horizontal, or its width when vertical or circular.

Options:

• _0px: Minimum. The progress bar has zero thickness and is not visible.
• _1000px: Maximum. The progress bar is up to 1000px thick.

Radius (Number, range)

Sets the corner rounding applied to the ends of the progress bar track and fill.

Options:

• ₀: Minimum. The progress bar has square, unrounded ends.
• ₁₀₀₀: Maximum. The progress bar ends are fully rounded.

Progress (Color Swatch)

Sets the color of the filled portion of the progress bar that advances as time passes.

Background (Color Swatch)

Sets the color of the unfilled track of the progress bar that sits behind the advancing fill.

Position Section

In the Position section configure the placement context, anchor point, and offset of the progress bar within the module.

Position Context (Tab Switch)

Sets the area the X and Y offset values are relative to when placing the progress bar.

Options:

• _{Content Flow}: The progress bar is positioned relative to the module’s content area.
• _{Full Stage}: The progress bar is positioned relative to the full module stage, including any areas outside the content flow.

Alignment (3×3 Checkbox Grid)

Sets the anchor point within the module from which the X and Y offsets are applied, using a nine-point grid representing the corners, edges, and center of the module.

X (Number, pixels)

Sets the horizontal offset of the progress bar from its Alignment anchor point. Positive values move the bar to the right, negative values move it to the left.

Options:

• _-1000px: Minimum. The progress bar is offset up to 1000px to the left of its anchor.
• _10000px: Maximum. The progress bar is offset up to 10000px to the right of its anchor.

Y (Number, pixels)

Sets the vertical offset of the progress bar from its Alignment anchor point. Positive values move the bar downward, negative values move it upward.

Options:

• _-1000px: Minimum. The progress bar is offset up to 1000px above its anchor.
• _10000px: Maximum. The progress bar is offset up to 10000px below its anchor.

Visibility Section

In the Visibility section configure which device sizes display the progress bar and whether it appears in the editor preview.

Visibility (Multi-select)

Sets the device breakpoints on which the progress bar is rendered. Multiple options can be selected simultaneously, and deselecting a breakpoint hides the progress bar at that screen size.

Options:

• _{Wide Screen}: The progress bar is shown on wide screen displays.
• _Desktop: The progress bar is shown on desktop displays.
• _Notebook: The progress bar is shown on notebook displays.
• _Tablet: The progress bar is shown on tablet displays.
• _Mobile: The progress bar is shown on mobile displays.

Preview in Editor (Toggle)

Controls whether the progress bar is rendered in the Module Editor canvas so it can be visually inspected while editing.

Options:

• _On: The progress bar is shown in the Module Editor preview.
• _Off: The progress bar is hidden in the Module Editor preview, but still appears on the live front end.

Duration & Init Tab

In the Duration & Init tab configure the default slide display time, slide play order, and the timing conditions under which the module initialises.

Duration Section

In the Duration section set the default display time for each slide.

Default Slide Duration (Number)

Sets how long each slide is displayed in milliseconds before auto progress moves to the next one. This value applies to all slides unless overridden by an individual slide’s own duration setting.

Options:

• _0ms: Minimum. Slides advance immediately with no delay.
• _999999ms: Maximum. A slide can be held for up to approximately 16 minutes before advancing.

Order Section

In the Order section configure which slide plays first when the module loads and whether the slide sequence is randomised.

Alternative 1st Slide (Dropdown)

Sets which slide is displayed first when the module initialises, overriding the default first-slide behaviour. Options are dynamically populated based on the slides present in the module.

Options:

• _Auto: The module begins on whichever slide is first in the defined slide order.
• ₁ through _N: The module begins on the specified slide number, skipping any slides before it.
• _{Last Slide}: The module begins on the last slide in the defined slide order.

Shuffle Order on Load (Toggle)

Controls whether the sequence of slides is randomised each time the module loads in the browser.

Options:

• _On: The slide order is randomised on each page load, so visitors see slides in a different sequence every visit.
• _Off: Slides play in their defined order every time.

Initialisation & Delay Section

In the Initialisation & Delay section configure the timing and conditions that determine when the module begins to initialise after the page loads.

After DOM Loaded (Number)

Sets an additional delay in milliseconds that is applied after the DOM has finished loading before the module begins to initialise.

Options:

• _0ms: Minimum. No delay is added and the module initialises as soon as the DOM is ready.
• _10000ms: Maximum. The module waits up to 10000ms after the DOM is loaded before initialising.

Viewport Threshold (+/-) (Number, pixels)

Adjusts the point at which the module is considered to have entered the viewport, shifting when initialisation is triggered. A negative value causes the module to begin initialising before it has fully scrolled into view, a positive value delays initialisation until the module is further into the viewport.

Options:

• _-1000px: Minimum. The module begins initialising up to 1000px before it scrolls into view.
• _1000px: Maximum. The module waits until it is 1000px further into the viewport before initialising.

Wait for API Call (Toggle)

Controls whether module initialisation is held until an external API call explicitly triggers it, regardless of DOM load state or viewport threshold.

Options:

• _On: The module does not initialise until an external API call is received, allowing external code to control the start of the module.
• _Off: The module initialises automatically based on DOM load timing and viewport threshold alone.