Slider
Open the page with full-width slides that tell your story.
A full-width Splide image slider with overlay, below or split captions, Ken Burns, animated content, thumbnails and progress bars.
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 Slider. 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: Content, Image, Title, Subtitle, Eyebrow, Button Text, Link, Style, Background, Overlay, … (13 in all) |
| 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. “Featured collections”. |
Layout
| Setting | What you can set |
|---|---|
| Caption Layout | On the image, Below the image, Split — image and text side by side or Image only |
| Image Side | Left or Right |
| Image Share | 20–80 · Stacks on mobile. |
| Height | Fixed — images fill it, Aspect ratio or Natural image height |
| Slide Height | 120–1200 |
| Aspect Ratio | 21:9, 16:9, 3:2, 4:3, 1:1 or 4:5 |
| Image Fit | Cover or Contain |
| Image Focus | Centre, Top, Bottom, Left or Right |
| Horizontal Position | Left, Center or Right |
| Vertical Position | Top, Middle or Bottom |
| Content Max Width | 160–1400 |
| Overlay | Gradient towards the text, Even tint or None |
| Overlay Color | Colour |
Slider Settings
| Setting | What you can set |
|---|---|
| Transition | Slide or Fade |
| Direction | Left to right, Right to left or Vertical |
| Animation Speed (ms) | Number |
| Autoplay | Paused in the editor and for visitors who prefer reduced motion. |
| Autoplay Speed (ms) | Number |
| Pause on Hover | On / off |
| Pause When Out of View | On / off |
| Infinite Loop | Loop around, Rewind to the first slide or Stop at the last slide |
| Peek Neighbours | 0–300 · Shows a sliver of the previous and next slides. |
| Gap Between Slides | 0–80 |
| Content Entrance | None, Fade, Fade up, Fade down, Slide in from the side, Zoom or Blur in · Plays on each slide as it becomes active; lines follow one another. |
| Ken Burns | None, Zoom in, Zoom out, Pan left or Pan right · A slow zoom or pan on the active image. |
| Ken Burns Duration (s) | Number |
| 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 slider, Grouped in the corner or Below, centred |
| Show on Hover Only | Touch screens always show them. |
| Pagination | None, Dots, Bars, Numbers or Counter (2 / 5) |
| Pagination Placement | On the slide or Below the slider |
| Thumbnail Strip | The slides’ images in a row below, synced with the slider. |
| Thumbnail Size | 32–200 |
| Progress Bar | None, Autoplay timer or Slide position |
| Progress Bar Position | Top edge of the slider or Below the slider |
| Play / Pause Button | On / off |
Style tab: design controls for Slide, Slide Content, Title, Subtitle, Button, Navigation :: Arrows, Navigation :: Pagination or Progress, Thumbnails & Controls — 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: Advanced Flip Box, Advanced Heading, Advanced Slider.