Navigation Panel

• Navigation Panel
• Controls Tab
• Mouse Wheel Tab
• Keyboard Tab
• Touch Tab

Navigation Panel

The Navigation 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 Navigation.

In the Navigation panel configure how visitors navigate through the module’s slides, including which navigation controls are enabled, how mouse wheel scrolling behaves, which keyboard keys are active, and how touch and swipe interactions are handled.

Note the Navigation panel is not visible when creating Hero type modules, given they have only one slide and hence have no reason for navigation.

Controls Tab

In the Controls tab enable or disable navigation control types, set the slide preview image dimensions used by those controls, and set the RTL display mode.

Preview Image Width (Number, pixels, range)

Sets the width of the slide preview images displayed inside thumbnail navigation controls.

Options:

• _32px: Minimum. The narrowest width at which slide preview images can be set.
• _1280px: Maximum. The widest width at which slide preview images can be set.

Preview Image Height (Number, pixels, range)

Sets the height of the slide preview images displayed inside thumbnail navigation controls.

Options:

• _18px: Minimum. The shortest height at which slide preview images can be set.
• _720px: Maximum. The tallest height at which slide preview images can be set.

RTL Mode (Dropdown)

Controls whether navigation controls are rendered in right-to-left order, which reverses the direction of slide progression for languages that read right-to-left.

Options:

• _On: Navigation controls are always rendered in right-to-left order.
• _Off: Navigation controls are always rendered in left-to-right order.
• _{Auto Detect}: RTL mode is applied automatically based on the dir attribute of the page.

Available Controls Section

In the Available Controls section toggle each navigation control type on or off. Enabling a control adds its dedicated configuration panel to the left sidebar.

Arrows (Toggle)

Enables or disables arrow navigation controls, which allow visitors to move to the previous or next slide by clicking left and right arrow buttons.

Bullets (Toggle)

Enables or disables bullet navigation controls, which display a row of small dots representing each slide and allow visitors to jump directly to a slide by clicking its dot.

Tabs (Toggle)

Enables or disables tab navigation controls, which display a group of clickable tabs representing each slide and allow visitors to jump directly to a slide by clicking its tab.

Thumbnails (Toggle)

Enables or disables thumbnail navigation controls, which display a group of slide preview images and allow visitors to jump directly to a slide by clicking its thumbnail.

Scrubber (Toggle)

Enables or disables the scrubber navigation control, which displays a progress bar that visitors can click or drag to scrub through the slides.

Mouse Wheel Tab

In the Mouse Wheel tab configure how the module responds when a visitor scrolls the mouse wheel over it.

Wheel Scroll (Dropdown)

Sets the mouse wheel scrolling behaviour for the module.

Options:

• _Ignore: Mouse wheel scroll events over the module are ignored and passed through to the page.
• _Infinite: Scrolling the mouse wheel moves continuously through slides with smooth momentum, looping back to the start or end when the last or first slide is reached.
• _Sequential: Scrolling the mouse wheel moves through slides one at a time per scroll event, stopping at the first and last slide.

Scroll Direction (Tab Switch)

Sets whether the direction of mouse wheel scrolling maps to forward or backward slide progression.

Options:

• _{Normal Direction}: Scrolling down advances to the next slide and scrolling up returns to the previous slide.
• _{Mirrored Direction}: Scrolling up advances to the next slide and scrolling down returns to the previous slide.

Required Min. Module Visibility (Number, range)

Sets the minimum percentage of the module that must be visible in the viewport before mouse wheel scroll events are captured by the module rather than passed through to the page.

Options:

• ₀: Minimum. Mouse wheel events are captured by the module regardless of how little of it is visible.
• ₁₀₀: Maximum. Mouse wheel events are only captured when the entire module is visible in the viewport.

Scroll Overflow Target (Dropdown)

Sets which page element receives scroll events once the module has finished scrolling through all its slides and a visitor continues to scroll.

Options:

• _Window: Overflow scroll events are passed to the browser window.
• _HTML: Overflow scroll events are passed to the <html> element.
• _Body: Overflow scroll events are passed to the <body> element.

Call Delay (Number, range)

Sets the delay in milliseconds after a mouse wheel scroll event is detected before the slide transition is triggered, which can smooth out accidental or overly rapid scrolling.

Options:

• ₀: Minimum. Slide transitions are triggered immediately on scroll with no delay.
• ₁₀₀₀₀: Maximum. Slide transitions are triggered 10000ms after a scroll event is detected.

Snap Threshold (Number, range)

Sets the scroll distance in pixels that must be covered before the module snaps to the next or previous slide.

Options:

• ₀: Minimum. The module snaps to the next or previous slide on any scroll movement.
• ₁₀₀₀: Maximum. A scroll distance of 1000 pixels must be covered before the module snaps to the next or previous slide.

Keyboard Tab

Sets which keyboard arrow keys, if any, visitors can use to navigate between slides.

Active Keys (Dropdown)

Sets which keyboard arrow keys trigger slide navigation when a visitor presses them.

Options:

• _{Left & Right Arrows}: Pressing the left arrow key moves to the previous slide and the right arrow key moves to the next slide.
• _{Up & Down Arrows}: Pressing the up arrow key moves to the previous slide and the down arrow key moves to the next slide.
• _None: Keyboard arrow keys do not trigger slide navigation.

Touch Tab

In the Touch tab configure how the module responds to touch and swipe gestures on mobile and desktop devices.

Swipe to navigate on Mobile (Toggle)

Sets whether touch swipe gestures on mobile devices can be used to navigate between slides.

Swipe to navigate on Desktop (Toggle)

Sets whether touch swipe gestures on desktop devices with touch screens can be used to navigate between slides.

Carousel Swipe on Mobile (Toggle)

Sets whether touch swipe gestures on mobile devices can be used to drag and navigate the carousel.

Carousel Swipe on Desktop (Toggle)

Sets whether touch swipe gestures on desktop devices with touch screens can be used to drag and navigate the carousel.

Block Vertical Drag from Scroll (Toggle)

Sets whether vertical touch drag gestures on the module are prevented from scrolling the page, ensuring that vertical swipes on the module do not accidentally trigger page scroll.

Force Swipe over Effects (Toggle)

Sets whether swipe gestures take priority over slide transition effects, ensuring that a swipe gesture immediately begins moving to the next or previous slide rather than waiting for the current transition effect to finish.

Swipe Direction (Tab Switch)

Sets the axis along which swipe gestures are detected for slide navigation.

Options:

• _Horizontal: Left and right swipes navigate between slides.
• _Vertical: Up and down swipes navigate between slides.

Touch Sensitivity (Fingers) (Dropdown)

Sets the minimum number of fingers that must be used in a swipe gesture before it is recognised as a slide navigation input.

Options:

• ₁: A single-finger swipe is sufficient to trigger slide navigation.
• ₂: At least two fingers must be used in a swipe gesture to trigger slide navigation.
• ₃: At least three fingers must be used in a swipe gesture to trigger slide navigation.
• ₄: At least four fingers must be used in a swipe gesture to trigger slide navigation.
• ₅: All five fingers must be used in a swipe gesture to trigger slide navigation.