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 !