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

  1. Open the page or post in the block editor.
  2. Click + (Block Inserter) and search for Image Cycle — it is in the Moduly category.
  3. 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.
  4. Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.

Settings

General

SettingWhat you can set
Imagescover or contain

Images

SettingWhat you can set
Stylecycle or ring
Image sizemedium, medium large, large or full
Open links in a new tabOn / off

Change

SettingWhat you can set
Effectfade, slide, zoom, wipe or blur
Directionleft, 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 imagetimer, hover, click, manual or scroll
Time per image (ms)800–15000
Change time (ms)0–3000
Pause while the mouse is over itOn / off
Pause / play buttonOn / off
Back to the first image when the mouse leavesOn / off
Directioncw or ccw
Blend between images while scrollingOn / off

Frame, dots and captions

SettingWhat you can set
Navigationdots, bars or none
Over the imageOn / off
Captionsnone, caption or custom
Caption positionbottom or top
Shape4/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
Alignmentcenter or right

Headline

SettingWhat you can set
Headline over the cardsOn / off
Gradient titleOn / off
TitleText
Second lineText
Small lineText
TextText
ButtonText
Button linkText
Title tagh1, h2, h3, p or div

Ring

SettingWhat you can set
Frame backgroundColour
Dots and focusColour
Caption shadeColour
Caption textColour
Title gradient startText
Title gradient endText
Entranceorbit, split, bloom, spiral, drop or none
Turningauto, scroll or off
Seconds per turn4–120
A card flips every (s, 0 = never)0–20
Card backsnext, mirror or color
Cards faceoutward, upright or inward
Circle to ellipse0.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 shape2/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.