← All widgetsWidget 98 · emcp_custom_98

Image Scroller

Elementor widget3 layouts10 content options19 style options3 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: image, scroller, screenshot, scroll, hover, long image, website preview.

Setup guide

  1. Open a page in Elementor, search the panel for Image Scroller and drag it into a container.
  2. Content › Image: Tall Image, Frame Style, Browser Bar Text, Scroll Trigger, Direction, Scroll Duration (seconds), Viewport Height, Link and 2 more.
  3. Pick a Scroll Trigger: On hover, Auto (loop), Mouse wheel / touch inside. Each one is shown below.
  4. Style tab sections: Frame, Hint & Caption. Colours, typography and spacing set here are scoped to this widget instance.
  5. Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Conditional options: Browser Bar Text appears when Frame Style is browser.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout

On hover

Scroll Trigger = hover

yourwebsite.com
Hover the window to scroll the imageHover to scroll
Hover the window to scroll the image
Layout

Auto (loop)

Scroll Trigger = auto

yourwebsite.com
Hover the window to scroll the imageHover to scroll
Hover the window to scroll the image
Layout

Mouse wheel / touch inside

Scroll Trigger = scroll

yourwebsite.com
Hover the window to scroll the imageHover to scroll
Hover the window to scroll the image

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Image

OptionTypeChoices / rangeDefaultNotes
Tall Image
image		Image
Frame Style
frame		DropdownNone, Browser window, Phone, Rounded cardbrowser
Browser Bar Text
browser_url		Textyourwebsite.comShown when frame = browser
Scroll Trigger
trigger		DropdownOn hover, Auto (loop), Mouse wheel / touch insidehover
Direction
direction		DropdownVertical, Horizontalvertical
Scroll Duration (seconds)
speed		Numbermin 1, max 606
Viewport Height
height		Slidermin 150, max 1200, px/vh420Responsive
Link
link		Link
Hover Hint Text
overlay_text		TextHover to scroll
Caption
caption		Text

Style tab

Frame

OptionTypeChoices / rangeDefaultNotes
Frame Color
frame_bg		Color#1f2937
Browser Dots Color
bar_dots		Color#6b7280
Browser URL Text Color
bar_text		Color#9ca3af
Browser URL Typography
bar_typo		Typography
Border
frame_border		Border
Corner Radius
frame_radius		Slidermin 0, max 60, px12
Box Shadow
frame_shadow		Box shadow
Hover Box Shadow
frame_shadow_h		Box shadow
Frame Thickness
frame_pad		Slidermin 0, max 40, px8
Image Filters
img_filter		Css_filter
Image Hover Filters
img_filter_h		Css_filter

Hint & Caption

OptionTypeChoices / rangeDefaultNotes
Hint Typography
hint_typo		Typography
Hint Text
hint_color		Color#ffffff
Hint Background
hint_bg		Colorrgba(17,24,39,.75)
Hint Radius
hint_radius		Slidermin 0, max 999, px999
Caption Typography
cap_typo		Typography
Caption Color
cap_color		Color#667085
Caption Align
cap_align		Button groupLeft, Center, Rightcenter
Caption Spacing
cap_mt		Slidermin 0, max 60, px12

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_98" and a settings object using the keys above. Run get-custom-widget with id 98 for the full JSON spec.