Image Carousel
Show a set of photos in a compact sliding carousel.
A Splide image carousel with slides per device, centre mode, marquee, rows, captions, a lightbox and hover effects.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Licence: free — installs straight from Moduly
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Image Carousel. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Slides
| Setting | What you can set |
|---|---|
| Slides | each item: Image, Title, Subtitle or Link |
| Image Resolution | any registered image size |
| Image Dimension | You can crop the original image size to any custom size. You can also set a single value for height or width in order to keep the original size ratio. |
| Title HTML Tag | H1, H2, H3, H4, H5, H6, div, span, … (9 in all) |
| Accessible Name | Read out by screen readers, e.g. “Our work”. |
Layout
| Setting | What you can set |
|---|---|
| Slides To Show | Number |
| Slide Spacing | 0–80 |
| Image Height | Aspect ratio, Fixed height or Natural (each image its own) |
| Aspect Ratio | 16:9, 3:2, 4:3, 1:1, 4:5, 3:4 or 2:3 |
| Height | 60–900 |
| Image Fit | Cover or Contain (logos) |
| Caption | On the image, On the image, revealed on hover, Below the image or None |
| Caption Alignment | Left, Center or Right |
| Caption Position | Top, Middle or Bottom |
| On Click | Open the slide’s link, Open the image in a lightbox or Nothing |
| Lightbox Caption | Title and subtitle, Title or None |
| Hover Effect | None, Zoom the image, Lift the slide, Grey until hovered or Dim the others |
Carousel Settings
| Setting | What you can set |
|---|---|
| Transition | Slide or Fade · Fade shows one slide at a time. |
| Direction | Left to right, Right to left or Vertical |
| Carousel Height | 200–1200 · A vertical carousel needs a height. |
| Animation Speed (ms) | Number |
| Autoplay | Paused in the editor. |
| Autoplay Speed (ms) | Number |
| Continuous Scroll (marquee) | Moves without stopping — good for logo strips. Replaces autoplay and arrows. |
| Scroll Speed | Pixels per frame. Negative scrolls the other way. |
| Pause on Hover | On / off |
| Pause When Out of View | On / off |
| Infinite Loop | Loop around, Rewind to the start or Stop at the end |
| Scroll As Shown Slides | Each move scrolls a whole view. |
| Slides per Move | Number |
| Center Mode | The active slide sits in the middle; the others fade and shrink. |
| Peek at the Edges | 0–300 · Shows part of the slides beyond each edge. |
| Rows | Images stacked in each column. |
| Drag / Swipe | On / off |
| Keyboard Arrows | On / off |
| Mouse Wheel | On / off |
Navigation
| Setting | What you can set |
|---|---|
| Arrows | On / off |
| Previous Icon | Icon picker |
| Next Icon | Icon picker |
| Arrow Placement | On the sides, Outside the carousel, Above, on the right or Below, centred |
| Show on Hover Only | On / off |
| Pagination | None, Dots, Bars, Numbers or Counter (3 / 12) |
| Progress Bar | None, Autoplay timer or Scroll position |
| Progress Bar Position | Below or Above |
| Play / Pause Button | On / off |
Style tab: design controls for Carousel Item, Slide Content, Navigation :: Arrows, Navigation :: Dots or Progress, Controls & Lightbox — colours, typography, spacing, borders and hover states.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
Related
- Works well with: Image Accordion, Image Compare, Image Cycle.