Slider Pro with simple counter

When using the slider as a hero for example it would be great to have a slide counter present that shows the number of the current active slide and how many slides are in the slider to indicate to the visitor at a quick glance how many slides there are to view.

The following code does the job for me for now, but it would be great to see it as an official option in some form.

<script>
  document.addEventListener('wmSectionSlider:ready', () => {

    window.wmSectionSlider.items.forEach((sliderContainer) => {
      const pluginSlider = sliderContainer.querySelector('[data-wm-plugin="section-slider"]');
      const swiperInstance = pluginSlider?.wmSectionSlider?.swiper;

      if (!swiperInstance) {
        console.warn("Swiper instance not found for", pluginSlider);
        return;
      }

      // Use the sliderContainer as the wrapper
      const wrapper = sliderContainer;

      // Create counter element (baking in the CSS for now)
      const counter = document.createElement("div");
      counter.className = "wm-slider-counter";
      Object.assign(counter.style, {
        position: "absolute",
        bottom: "1rem",
        right: "1rem",
        zIndex: "10",
        background: "rgba(0, 0, 0, 0.6)",
        color: "#fff",
        padding: "0.4em 0.8em",
        borderRadius: "1em",
        fontSize: "14px",
        fontFamily: "sans-serif",
      });

      wrapper.appendChild(counter);

      const updateCounter = () => {
        const current = swiperInstance.realIndex + 1;
        const total = swiperInstance.slides.length;
        counter.textContent = `${current} / ${total}`;
      };

      updateCounter();
      swiperInstance.on("slideChange", updateCounter);

      console.log("Counter successfully added to", wrapper);
    });
  });
</script>