Image Cycle
Show several images in one spot without a full slider.
Several images in one frame, changing on a timer, on hover, on click, with the scroll position or with the dots, plus a ring of photo cards.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Image Cycle — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
Settings
General
| Setting | What you can set |
|---|
| Images | cover or contain |
Images
| Setting | What you can set |
|---|
| Style | cycle or ring |
| Image size | medium, medium large, large or full |
| Open links in a new tab | On / off |
Change
| Setting | What you can set |
|---|
| Effect | fade, slide, zoom, wipe or blur |
| Direction | left, right, up or down |
| Ken Burns (slow zoom or pan) | none, zoom in, zoom out, pan left or pan right |
| Ken Burns time (s) | 2–30 |
| Change the image | timer, hover, click, manual or scroll |
| Time per image (ms) | 800–15000 |
| Change time (ms) | 0–3000 |
| Pause while the mouse is over it | On / off |
| Pause / play button | On / off |
| Back to the first image when the mouse leaves | On / off |
| Direction | cw or ccw |
| Blend between images while scrolling | On / off |
Frame, dots and captions
| Setting | What you can set |
|---|
| Navigation | dots, bars or none |
| Over the image | On / off |
| Captions | none, caption or custom |
| Caption position | bottom or top |
| Shape | 4/3, 3/2, 16/9, 1/1, 3/4, 2/3 or 21/9 |
| Corner radius (px) | 0–60 |
| Width (px, 0 = full) | 0–1600 |
| Name (screen readers) | Text |
| Alignment | center or right |
Headline
| Setting | What you can set |
|---|
| Headline over the cards | On / off |
| Gradient title | On / off |
| Title | Text |
| Second line | Text |
| Small line | Text |
| Text | Text |
| Button | Text |
| Button link | Text |
| Title tag | h1, h2, h3, p or div |
Ring
| Setting | What you can set |
|---|
| Frame background | Colour |
| Dots and focus | Colour |
| Caption shade | Colour |
| Caption text | Colour |
| Title gradient start | Text |
| Title gradient end | Text |
| Entrance | orbit, split, bloom, spiral, drop or none |
| Turning | auto, scroll or off |
| Seconds per turn | 4–120 |
| A card flips every (s, 0 = never) | 0–20 |
| Card backs | next, mirror or color |
| Cards face | outward, upright or inward |
| Circle to ellipse | 0.15–1 |
| 3D tilt (degrees) | -60–60 |
| Ring radius (px, 0 = auto) | 0–900 |
| Height (px, 0 = auto) | 0–1200 |
| Card width (px, 0 = auto) | 0–400 |
| Card shape | 2/3, 3/4, 1/1, 4/3 or 9/16 |
| Card corner radius (px) | 0–40 |
Styles tab: spacing, from WordPress's own design tools.
Tips
- Start with the Style choice — it changes the overall look the most; fine-tune the rest afterwards.
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- Fixed before release: attributes named align and style collided with block supports (the editor preview failed with “Error loading block”); they are frameAlign and look. The same align clash was then found in SVG Morph and 360° Rotation and fixed in their 1.0.1.
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor).
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
- Also available for Elementor (Image Cycle), Divi (Image Cycle).
- Works well with: Carousel, Device Scroll, Filterable Gallery.