Carousel - Numbers as custom cursor shown UNDER normal cursor

[koliveros]

Hey there,

Really love how https://www.actualsource.work/ uses the carousel feature with the numbers on top of the image (ie 1/5)

I'd like to know how I can (1) have the numbers over the image (2) use it as a custom cursor (so the numbers follow the pointer) (3) have it live below the normal cursor (not instead of it)

Thank you so much!

[mariusjopen]

Dea r@

probably a simple jQuery code was used which makes the number to follow the cursor.

There are plenty of those codes out there which you can use.
Also have a look here:
http://laytheme.com/documentation.html#custom-javascript

Best!

Marius

[craigfeldspar]

Up @arminunruh :)
Do you think you can make this feature?
best!

Craig

[arminunruh]

that website used to be a lay theme website, now they custom coded it!

i think i wont code this feature :O

[craigfeldspar]

I managed to make the numbers as custom cursor thanks to chatgpt.
here's what it looks like : https://www.benoitlefeuvre.com/earthworks/

here's the js code :

<script>
        document.addEventListener("mousemove", (e) => {
            const followTexts = document.querySelectorAll(".numbers");
            const x = e.clientX;
            const y = e.clientY;

            // Update the position for each element with the class
            followTexts.forEach((followText) => {
                followText.style.left = x + "px";
                followText.style.top = y + "px";
            });
        });
</script>

then here's the css selector :

.lay-carousel-sink-parent .numbers {
}

I can't share my exact style because I have several hover states on the carousel, so you'll have to specify the css that works best for you.
To retain the next/prev slide function, you'll need to add an empty 10x10px png, for example, to the 'custom mouse cursor' parameters.

I hope this helps !