1263D title carousel

In this effect, a click pivots a title and its image on a 3D cylinder. We also add a soft mouse follow on desktop and a swipe with the Observer plugin on touch. Ready? Let’s go!

HTML Structure

The structure of the effect is relatively simple. A container holds a stage, and inside it we run two separate rings — one for the images, one for the titles:

<section class="mwg_effect126">
    <div class="container">
        <div class="stage">
            <div class="ring ring-media">
                ...
            </div>
            <div class="ring ring-text">
                ...
            </div>
        </div>
    </div>
</section>

Each media slide lives in an item, with a media-face wrapping the image:

<div class="ring ring-media">
    <div class="item">
        <div class="media">
            <div class="media-face">
                <img src="./assets/medias/1.webp" alt="" draggable="false">
            </div>
        </div>
    </div>
    ...
</div>

And each title slide is just a word inside its own item:

<div class="ring ring-text">
    <div class="item">
        <div class="word">Dark Red</div>
    </div>
    <div class="item">
        <div class="word">Borderline</div>
    </div>
    ...
</div>

Keeping text and media on two rings will let us stagger their flips later, so the title can lead and the image can follow.