Lightbox: Navigation

Controls how visitors move between items — arrows, dots, counter, loop behavior, transitions, and the auto-progress slideshow.

Location Gallery Settings → Interactions → Lightbox Settings → Navigation

---

Loop Gallery #

Setting	Loop Gallery
Default	On

When looping is on, pressing Next on the last item wraps around to the first, and pressing Previous on the first item wraps to the last. When looping is off, navigation stops at each end and the arrows become inactive (or hidden — see Hide Arrows at Ends below).

---

Transitions #

Transition Style

Setting	Transition Between Items
Options	Fade Horizontal Vertical None
Default	Fade

Sets the animation played when moving from one item to the next.

• Fade — The current item fades out while the next fades in.
• Horizontal — Items slide left or right depending on direction.
• Vertical — Items slide up or down depending on direction.
• None — Instant cut with no animation.

Transition Duration

Setting	Transition Duration
Options	Fast (150ms) Normal (300ms) Slow (450ms) Custom
Default	Normal (300ms)
Visible when	Transition is set to Fade, Horizontal, or Vertical

How long the animation takes to complete. Selecting Custom reveals a slider (0–1000ms, default 400ms) for a precise value.

---

Navigation Arrows #

Show Navigation Arrows

Setting	Show Navigation Arrows
Default	On

Displays previous and next buttons on either side of the item. Visitors can also navigate with the ← and → keyboard keys regardless of whether the arrows are visible.

Arrow Icon Style

Setting	Arrow Icon Style
Options	chevron chevron_double arrow arrow_narrow arrow_square arrow_circle arrow_circle_broken arrow_block
Default	chevron
Visible when	Show Navigation Arrows is on

Style	Description
chevron	Simple ‹ › chevron marks
chevron_double	Double chevron «»
arrow	Standard arrow with a short tail
arrow_narrow	Thinner arrow
arrow_square	Arrow inside a square container
arrow_circle	Arrow inside a circle
arrow_circle_broken	Arrow inside an arc
arrow_block	Bold block-style arrow

Arrow Size

Setting	Arrow Size
Range	0–120
Units	px em rem %
Default	40px
Visible when	Show Navigation Arrows is on

Controls the icon size of the prev/next arrows. Arrow button colors and backgrounds are set separately in Lightbox: Custom Colors.

Hide Arrows at Ends

Setting	Hide Arrows at First and Last Item
Default	Off
Visible when	Show Navigation Arrows is on and Loop Gallery is off

When looping is disabled and this is turned on, the Previous arrow is hidden on the first item and the Next arrow is hidden on the last. This signals to the visitor that they’ve reached the end, rather than showing a disabled or non-functional button.

---

Navigation Dots #

Show Navigation Dots

Setting	Show Navigation Dots
Default	Off

Displays a row of dots below the item, one per gallery item. The active dot is highlighted. Clicking a dot jumps directly to that item. Dots can be used alongside arrows, or on their own.

Dot Style

Setting	Dot Style
Options	Fill Stroke Square Square Stroke
Default	Fill
Visible when	Show Navigation Dots is on

Style	Appearance
Fill	Solid circle; active dot uses brand blue by default
Stroke	Outlined circle, hollow centre
Square	Solid square
Square Stroke	Outlined square

Dot Size

Setting	Dot Size
Range	4–24px
Default	12px
Visible when	Show Navigation Dots is on

Space Between Dots

Setting	Space Between Dots
Range	0–30
Units	px em rem %
Default	8px
Visible when	Show Navigation Dots is on

Dot colors (normal, hover, active) are customizable in Lightbox: Custom Colors.

---

Item Counter #

Setting	Show Item Counter
Default	Off

Displays a “3 / 12” style counter in the Lightbox toolbar, showing the current item position and total count. The counter updates with every navigation and is announced to screen readers as a single unit (aria-atomic).

---

Auto-Progress (Slideshow) #

Auto-progress automatically advances through the gallery at a set interval, turning any gallery into a self-playing slideshow.

Enable Auto Progress

Setting	Enable Auto Progress
Default	Off

Enables automatic advancement to the next item. Works with Loop Gallery — if looping is off, auto-progress stops at the last item.

Delay

Setting	Delay
Range	1–20 seconds
Default	5 seconds
Visible when	Enable Auto Progress is on

How long the Lightbox waits on each item before moving to the next.

Progress Indicator

Setting	Progress Indicator
Options	Progress Bar Spinner None
Default	Progress Bar
Visible when	Enable Auto Progress is on

Visual feedback showing how long remains on the current item before it advances.

• Progress Bar — A colored bar that fills (or drains) over the delay period. Position is set by the Bar Location control below.
• Spinner — A circular SVG ring in the toolbar that completes one full revolution per delay period.
• None — Auto-progress runs silently with no visual indicator.

Bar Location

Setting	Bar Location
Options	Top Right Bottom Left
Default	Bottom
Visible when	Progress Indicator is set to Progress Bar

Where the progress bar appears relative to the item area.

Pause On

Setting	Pause On
Options (multi-select)	Full Image Mouseover Thumbnail Mouseover
Default	Full Image Mouseover
Visible when	Enable Auto Progress is on

Pauses the countdown when the visitor interacts with the specified element. When the cursor or touch moves away, the timer resumes. You can select both options, or neither, depending on the experience you want.

Stop on User Interaction

Setting	Stop on User Interaction
Default	On
Visible when	Enable Auto Progress is on

When this is on, auto-progress stops permanently the moment a visitor manually navigates (using arrows, dots, keyboard, or swipe). It will not resume until they click the Play button (if that control is enabled). With this off, manual navigation only pauses the timer — it resumes after the Pause On condition clears.

Show Play / Pause Button

Setting	Show Play / Pause Button
Default	Off
Visible when	Enable Auto Progress is on

Adds a play/pause toggle to the Lightbox toolbar so visitors can control the slideshow themselves. The button state reflects whether auto-progress is currently running or paused. When auto-progress is stopped due to user interaction (see above), clicking Play fully restarts the timer from the current item.