Media widget
Slides
A full-width hero slider with a background, a title, text and buttons on every slide.
Build it with your AI
“Add a full-width hero slider with three slides, each with a heading, a line of text and a button.”
Live demo
See it working
Settings
64 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
23 settings
Slides
Slides
Layout
Height
Content max width
Horizontal position
Vertical position
Text alignment
Heading HTML tag
Image resolution
First image loading
Slider
Transition
Transition duration (ms)
Content animation
Infinite loop
Swipe and drag
Arrows
Previous icon
Next icon
Pagination
Autoplay
Delay (ms)
Pause on hover
Pause button
Accessible name
Design
41 settings
Slides
Background color
Text color
Content padding
Border radius
Image focal point
Ken Burns zoom
Image filters
Overlay
Overlay
Opacity
Heading
Typography
Color
Spacing below
Text shadow
Description
Typography
Color
Spacing below
Buttons
Button style
Second button style
Button size
Gap between buttons
Typography
Border radius
Text color
Background
Border color
Arrows
Button size
Icon size
Distance from edge
Border radius
Icon color
Background
Border color
Pagination & pause button
Distance from bottom
Dot size
Active dot width
Space between dots
Dot color
Active dot color
Typography
Color
Pause button color
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Slides settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add a full-width hero slider with three slides, each with a heading, a line of text and a button.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{
"type": "slides",
"settings": {
"height": { "size": 460, "unit": "px" },
"slides": [
{
"image": { "id": 41 },
"heading": "Build pages by talking to your AI",
"description": "Claude, ChatGPT and Cursor build with the same widgets you use.",
"button_text": "See how AI builds",
"link": { "url": "/ai/" },
"button2_text": "Download free",
"button2_link": { "url": "/download/" },
"overlay_color": "rgba(10,31,51,0.72)"
},
{
"image": { "id": 39 },
"heading": "One Design System for every page",
"description": "Colors, fonts and buttons, set once and used everywhere.",
"button_text": "Explore the Design System",
"link": { "url": "/features/design-system/" },
"overlay_color": "rgba(10,31,51,0.72)"
},
{
"image": { "id": 44 },
"heading": "Design every part of your site",
"description": "Headers, footers, post layouts and archives in the Theme Builder.",
"button_text": "Explore the Theme Builder",
"link": { "url": "/features/theme-builder/" },
"overlay_color": "rgba(10,31,51,0.72)"
}
]
}
}More media widgets
Works well with
Facebook Embed
A Facebook page, post or video on your site — loading only when a visitor asks for it.
Google Maps
A map of your address that can wait for a click before loading anything from Google.
Hotspot
An image with pulsing markers that open little tooltips.
Image Carousel
Swipe through images, several per view, with captions and a lightbox.
Before / After
Drag a divider to compare two images: before and after, draft and final.
Image Gallery
Images in a grid, masonry or justified rows, with captions, hover effects and a lightbox.