360° Rotation (Divi)

A product the shopper can turn, for Divi 5. Pick the frames of the turn in the Media Library; the module stacks them and swaps one for the next as it is dragged, hovered, scrolled or played. The demo uses short sequences from the product photos; a real turn uses 24–72 frames. Each example is labelled with its settings.

1. Drag to turn

Turn With: Drag / swipe · Keep Spinning After a Flick · Loop Round · Arrow Keys (click it, then ← →) · the 360° hint until the first turn · buttons: previous, next, magnifier, fullscreen · loading bar.

Try it

Drag or swipe across the photo. A quick flick keeps it spinning for a moment. The lens button magnifies what is under the pointer, using the full-size image.

2. Autoplay, hover and scroll

Play: Automatically at 3 frames per second, pausing on hover and resuming after 3 s · Turn With: Mouse position (the frame follows the pointer across the image) · Turn With: Page scroll (one turn while the image scrolls past).

Page scroll, 2 turns

3. Play button and an introductory turn

Play: With a play button (plays and pauses, backwards here) · Play: One turn to introduce, then stop · Frames Run the Other Way · Start at Frame 2.

One turn, then stop · frames reversed

4. Buttons below, a bigger lens, width and alignment

Buttons Position: Below the image, aligned right (centre on phones) · Magnification 4× with a 260 px square lens · Width 420 px, aligned left · no loop (stops at the ends) · mouse wheel turns it.

5. Styled from the Design tab, on a dark background

Viewer background, radius and shadow · hint colours and radius · buttons: size 46 px, colours, hover colours, bar background · loading bar colour · cursor: left-right arrows.