Custom Dot Pagination

[phaniophrero]

Hi everyone, I'm trying to create a custom pagination for my Swiper slider in my React / Next.js app, and so far I only found the way that is shown in the Swiper documentation, but what I'm trying to do is a bit different.
This is the basic documentation way :

  const pagination = {
    clickable: true,
    renderBullet: function (index, className) {
        return '<span class="' + className + '">' + (index + 1) + "</span>";
    },
  };

But what I want to achieve is having that Autoplay Progress element as pagination dots, so somehow I'd like to combine the pagination with the Autoplay progress.

I've tried this, but is rendering [object Object] for every slide I have instead of that SVG Circle :

  const pagination = {
    clickable: true,
    renderBullet: function (index, className) {
      return (
        <div className={className}>
          <div className="autoplay-progress" slot="container-end">
            <svg viewBox="0 0 48 48" ref={progressCircle}>
              <circle cx="24" cy="24" r="20"></circle>
            </svg>
            <span ref={progressContent}></span>
            {/* <span class={`${className}`}>{index + 1}</span> */}
          </div>
        </div>
      );
      //   return '<span class="' + className + '">' + (index + 1) + "</span>";
    },
  };

Quick update I've already tried this too, and I'm still getting [object Object] :

  const pagination = {
    clickable: true,
    type: "custom",
    renderCustom: (_, current, total) => {
      return (
        <div className="">
          <div className="autoplay-progress" slot="container-end">
            <svg viewBox="0 0 48 48" ref={progressCircle}>
              <circle cx="24" cy="24" r="20"></circle>
            </svg>
            <span ref={progressContent}></span>
            {/* <span class={`${className}`}>{index + 1}</span> */}
          </div>
        </div>
      );
    },
  };

Does anyone know how can I do this?

[phaniophrero]

I've also found this solution but is not really working with what I'm trying to do, It looks like the --progressCircle is not working inside that ReactDOMServer.renderToStaticMarkup :

  const progressCircle = useRef(null);
  const progressContent = useRef(null);
  const onAutoplayTimeLeft = (s, time, progress) => {
    progressCircle.current?.style.setProperty("--progress", 3 - progress);
    // progressContent.current.textContent = `${Math.ceil(time / 1000)}s`;
  };

  const pagination = {
    clickable: true,
    renderBullet: function (index, className) {
      return ReactDOMServer.renderToStaticMarkup(
        <div className="autoplay-progress" slot="container-end">
          <svg viewBox="0 0 48 48" ref={progressCircle}>
            <circle cx="24" cy="24" r="20"></circle>
          </svg>
          <span ref={progressContent}></span>
        </div>
      );
    },
  };