Image Cycle
Show several images in one spot without a full slider.
A ring of photo cards around a headline — five GSAP entrances, endless or scroll-linked spin, flips that cycle every image, ellipse orbits and 3D tilt.
Elementor widget
Requirements
- Moduly 0.5.0 or newer for the animation (it ships GSAP); on an older version the widget shows as rendered, without it
- 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 Cycle. 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
Images
| Setting | What you can set |
|---|---|
| Images | each item: Image, Image Resolution, Image Dimension, Link or Alt Text · Up to 16 images. 6–12 make the fullest ring. |
Headline
| Setting | What you can set |
|---|---|
| Title | Text |
| Title Second Line | Text |
| Subtitle | Text |
| Text | Text |
| Button Text | Text |
| Button Link | Link |
| Title HTML Tag | H1, H2, H3, H4, H5, H6, div, span, … (9 in all) |
| Subtitle HTML Tag | H1, H2, H3, H4, H5, H6, div, span, … (9 in all) |
| Headline Reveal | Blur in, Rise, Zoom out or None — always visible |
Animation
| Setting | What you can set |
|---|---|
| Entrance | Orbit — fly in, gather, open into a ring, Split — from both sides into two arcs, Bloom — burst out from the centre, Spiral — wind out from the centre, Drop — fall into place one by one or None — start as a ring |
| Entrance Direction | Bottom, Left, Top or Right |
| Start Entrance | On page load or When scrolled into view |
| Entrance Speed (s) | Number |
| Stagger (s) | Number |
| Initial Scale | How big the cards are when they fly in. |
| Initial Opacity | 0–1 |
| Rotation | Keep spinning, Follow the page scroll or Off |
| Direction | Clockwise or Counter-clockwise |
| One Turn (s) | Number |
| Turns While Scrolling Past | Number |
| Pause While Hovering a Card | On / off |
| Flip a Card Every (s) | 0 turns flipping off. |
| Which Card | Random, Round the ring or All at once |
| Card Back | Another image from the set, The same image, mirrored or A solid colour · “Another image” makes the ring cycle through the whole set as cards flip. |
| Back Colour | Colour |
| Ring Radius | 40–900 · Distance from the centre to each card. % is of half the widget’s smaller side. |
| Cards Point | Outward, like spokes, Upright or Inward |
| Ellipse | 0.15–1 · 1 is a circle. Lower values flatten the ring into an orbit; cards at the back shrink and dim. |
| 3D Tilt | -60–60 · Leans the whole ring back in perspective. |
| Card Hover | Grow, Brighten or None |
Style tab: design controls for Layout, Cards or Headline — colours, typography, spacing, borders and hover states.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Hover-pause is measured only indirectly (tween pause call); not exercised with a real pointer.
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
Related
- Also available for Divi (Image Cycle), Gutenberg (Image Cycle).
- Works well with: Image Accordion, Image Carousel, Image Compare.