124Snap wheel gallery

In this effect, we drag a 3D ring of thumbnails under a large preview. When we release, the ring snaps to the closest frame and the hero updates to match. Let’s go!

HTML Structure

The structure of the effect is relatively simple. A hero holds the large preview, and a wheel below it wraps a ring of thumbnails:

<section class="mwg_effect124">
    <div class="hero">
        <img class="hero-media" src="./assets/medias/01.png" alt="" draggable="false">
    </div>

    <div class="wheel">
        <div class="ring">
            ...
        </div>
    </div>
</section>

Inside the ring, every thumbnail lives in its own media wrapper:

<div class="ring">
    <div class="media"><img src="./assets/medias/01.png" alt="" draggable="false"></div>
    <div class="media"><img src="./assets/medias/02.png" alt="" draggable="false"></div>
    <div class="media"><img src="./assets/medias/03.png" alt="" draggable="false"></div>
    ...
</div>

The hero and the ring share the same image URLs, so swapping the preview later is only a matter of copying a src.