Image Carousel
A swipeable carousel of images with captions and lightbox.
The Image Carousel shows images from your media library in a row that visitors swipe, drag or page through with arrows, several at a time. Images can have captions and open in a lightbox. For slides that hold other widgets use the Carousel; for a full-width hero use Slides.
Add an image carousel
Insert it
Open Insert in the left panel, find Image Carousel under Media (or type
carouselin Search widgets) and click it or drag it onto the canvas.Choose the images
Click Add images in Content → Images and select several images in the media library. Move left and Move right on a thumbnail change the order.
Set how many show
In Content → Carousel, set Slides per view and Gap. Switch the device in the top bar to show one image on mobile.
Choose captions and links
Pick a Caption source and whether images open in a Lightbox.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing).
Content tab
Images
| Setting | What it does |
|---|---|
| Images | The images. Add images opens the media library; Move left and Move right change the order. |
| Resolution | The image size WordPress serves. Smaller files load faster; pick one at least as wide as the image is shown. Default: Large. |
| Caption | Shows no caption, or the caption, alt text or title from the media library. Options: None, Media library caption, Alt text, Title. |
| Link | Opens the full image in a lightbox, links to the image file, or no link. Options: None, Lightbox, Image file. Default: Lightbox. |
Carousel
| Setting | What it does |
|---|---|
| Slides per view | How many images show at once. Decimals such as 1.2 let the next image peek in. Per device. |
| Slides to scroll | How many images one arrow click or swipe moves. Per device. |
| Gap | Space between the images. Per device. |
| Vertical alignment | How images of different heights line up. Options: Equal height, Top, Middle, Bottom. |
| Navigation › Arrows | Shows previous and next buttons. On by default. |
| Navigation › Arrows position | Where the arrows sit. Options: Inside, over the slides, Outside the slides, Below, next to the pagination. Default: Inside, over the slides. Shown when Arrows is on. |
| Navigation › Previous icon | Icon of the previous button. Shown when Arrows is on. |
| Navigation › Next icon | Icon of the next button. Shown when Arrows is on. |
| Navigation › Pagination | The position indicator under the images. Options: None, Dots, Fraction (2 / 5), Progress bar. Default: Dots. |
| Navigation › Rewind | Next on the last image goes back to the first one. |
| Navigation › Mouse drag | Lets visitors drag the images with the mouse. Touch swipe and trackpads always work. On by default. |
| Navigation › Transition duration (ms) | How long the move to the next image takes, in milliseconds. Default: 500. |
| Autoplay › Autoplay | Moves to the next image on its own. Never starts for visitors who prefer reduced motion; pauses while hovered or focused. |
| Autoplay › Delay (ms) | Time each image stays, in milliseconds. Default: 5000. Shown when Autoplay is on. |
| Autoplay › Pause on hover | Stops autoplay while the pointer is over the carousel. On by default. Shown when Autoplay is on. |
| Autoplay › Pause button | Adds a pause/play button. Required by WCAG 2.2.2 for content that moves on its own. On by default. Shown when Autoplay is on. |
| Autoplay › Accessible name | Name of the carousel for screen readers, for example “Project photos”. |
Design tab
Images
| Setting | What it does |
|---|---|
| Aspect ratio | Crops every image to the same shape. Original keeps each image’s own shape. Per device. |
| Image fit | Cover fills the frame and crops; Contain shows the whole image with bars around it. Options: Cover (crop), Contain (letterbox). |
| Letterbox color | Color of the bars around images in Contain mode. Shown when Image fit is Contain (letterbox). |
| Border radius | Rounds the corners of the images. Per device. |
| Border | Border of the images. |
| CSS filters | Blur, brightness, contrast, saturation and hue of the images. |
| Hover effect | An effect when the pointer is over an image. Options: None, Zoom, Grayscale to color, Dim. Default: Zoom. |
Caption
This section shows when Caption is set.
| Setting | What it does |
|---|---|
| Typography | Text style or font, size, weight and spacing of the captions. |
| Color | Color of the captions. |
| Alignment | Aligns the captions. Options: Left, Center, Right. Per device. |
| Spacing | Space between an image and its caption. |
Arrows
This section shows when Arrows is on.
| Setting | What it does |
|---|---|
| Button size | Width and height of the arrow buttons. Per device. |
| Icon size | Size of the arrow icons. Per device. |
| Offset | Distance of the arrows from the edge of the images (inside or outside), or between the two arrows (below). Per device. |
| Normal › Icon color | Color of the arrow icons. |
| Normal › Background | Background color of the arrow buttons. |
| Normal › Border | Border of the arrow buttons. |
| Normal › Shadow | Shadow of the arrow buttons. |
| Hover › Icon color | Color of the arrow icons on hover. |
| Hover › Background | Background color of the arrow buttons on hover. |
| Hover › Border color | Border color of the arrow buttons on hover. |
| Border radius | Rounds the corners of the arrow buttons. Per device. |
Pagination
This section shows when Pagination is set.
| Setting | What it does |
|---|---|
| Distance from slides | Space between the images and the pagination. Per device. |
| Alignment | Aligns the pagination. Options: Left, Center, Right. Per device. |
| Dot size | Size of the dots. Shown when Pagination is Dots. |
| Active dot width | Width of the current dot. Same as the dot size for round dots, wider for a pill. Shown when Pagination is Dots. |
| Space between dots | Space between the dots. Shown when Pagination is Dots. |
| Dot color | Color of the dots. Shown when Pagination is Dots. |
| Active dot color | Color of the current dot. Shown when Pagination is Dots. |
| Typography | Text style of the “2 / 5” counter. Shown when Pagination is Fraction (2 / 5). |
| Color | Color of the “2 / 5” counter. Shown when Pagination is Fraction (2 / 5). |
| Bar height | Height of the progress bar. Shown when Pagination is Progress bar. |
| Bar color | Color of the filled part of the progress bar. Shown when Pagination is Progress bar. |
| Track color | Color of the empty part of the progress bar. Shown when Pagination is Progress bar. |
| Pause button color | Color of the pause/play button. Shown when Autoplay is on. |
Shared Design sections
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
Behaviour sections
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Same shape. Design → Images → Aspect ratio crops every image to the same shape, 4:3 by default; Original keeps each image's own shape.
- Alt text. Each image uses its alt text from the media library; set it there.
- Autoplay carefully. If you turn on Autoplay, keep the Pause button. Autoplay never starts for visitors who prefer reduced motion.
- Lightbox. Lightbox colors, captions, counter and download button are set once for the site in Styles → Theme → Lightbox. See Lightbox & site behaviour.