The thumbnail navigation feature controls the carousel UI inside each search result card (.mlx-search-thumb), not the full listing popup carousel (#orei-thumbnails-carousel). It lets you control whether navigation is visible, which navigation types are used, which icons appear, and how arrows and dots behave in normal, hover, and active states. This feature is enabled by default.

Where to configure it

Open the page in Elementor, select the OREI widget, then use two areas: Content → Listing Boxes → THUMB NAVIGATION for behaviour and icon choices, and Style → Listing Boxes → THUMB NAVIGATION for visual styling.

(Note that the Style THUMB NAVIGATION area only appears when Thumb Navigation is not set to None.)

Enable or disable thumbnail navigation

In Content → Listing Boxes → THUMB NAVIGATION, set Thumb Navigation to one of the following modes: Arrows and Dots (default), Arrows, Dots, None.

None hides all thumbnail navigation in listing cards. Arrows shows only previous/next controls. Dots shows only dot navigation. Arrows and Dots shows both.

Configure arrow icons, including custom SVG

In the same Content area, use Previous Thumb Icon and Next Thumb Icon. These are Elementor Icons controls, so you can choose from supported libraries or upload custom SVG icons. Defaults are chevrons (fas fa-chevron-left and fas fa-chevron-right). These controls are shown when mode is Arrows and Dots or Arrows.

Configure dot style

Use Dot Style in Content → Listing Boxes → THUMB NAVIGATION. The available styles are Balls (default), Squares, Lines, Custom. If Custom is selected, the Custom Nav Dots icon control appears so you can choose an icon or upload SVG.

Dot style controls appear when mode is Arrows and Dots or Dots. The custom dot picker appears only when Dot Style is Custom.

Style arrows (size, color, hover, transforms)

In Style → Listing Boxes → THUMB NAVIGATION → Arrows, use Arrow Size to size the icon itself and Arrow Padding to size the clickable button container. Then use the Normal and Hover tabs to configure Arrow Color, Arrow Background, Box Shadow, Scale (X/Y), Offset (X/Y).

This allows effects like branded hover backgrounds, icon color shifts on hover, subtle scale-up transitions, and position nudges.

Style dots (normal, hover, active)

In Style → Listing Boxes → THUMB NAVIGATION → Navigation Dots, use the Normal, Hover, Active tabs to set Size, Border, Background Colour. This gives full control over passive, hover, and current-position dot states.

Runtime behavior details

For performance, only the first listing-card image is loaded initially. Additional photo metadata and image URLs are fetched when users actually interact with thumbnail navigation (arrow or dot click). The system uses photo_count from listing data to decide whether navigation should render immediately.

Navigation appears only when a listing has at least two photos. Carousel movement loops in both directions, so next from the last photo returns to the first, and previous from the first returns to the last. Dot windows are paged for large photo sets: Balls/Squares/Custom show 10 at a time, while Lines shows 8 at a time, with a smooth 250ms shift animation.

Arrow visibility is progressive: controls start subdued, card hover raises visibility, direct arrow hover applies hover styling, and once navigation is engaged both arrows remain fully opaque for that listing card.

Quick implementation patterns

If you want a minimal setup, use Arrows, then set Arrow Size, Arrow Padding, and Normal/Hover arrow colors. If you want an Airbnb-style card interaction, use Arrows and Dots with Balls or Lines, then style hover and active states. For full branding, use custom SVG for arrows and dots, then tune colors and transform settings across states.

Troubleshooting

If style changes seem inconsistent, regenerate Elementor CSS and clear cache. If controls do not appear, confirm Thumb Navigation is not None. If navigation does not show for a listing, check that listing data includes photo_count > 1.