CSS ::scroll-marker实现slide序号切换实例页面

CSS代码：

zxx-slide {
  display: flex;
  width: 250px; height: 186px;
  position: relative;
  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-marker-group: after;

  a {
    scroll-snap-align: start;
    counter-increment: markers;

    &::scroll-marker {
      display: inline-grid;
      content: counter(markers);
      font-family: system-ui;
      padding: 5px;
      min-width: 1em;
      height: 1em;
      line-height: 1em;
      border: 1px solid rgb(0 0 0 / 0.15);
      border-radius: .5em;
      background-color: #eee;
      place-items: center;
      text-decoration: none;
      color: #000;
    }

    img {
      display: block;
      width: 250px; height: 186px;
    }
  }
  
  ::scroll-marker:hover {
    filter: brightness(0.96);
  }

  ::scroll-marker:target-current {
    background-color: #cd0000;
    color: white;
  }
}

::scroll-marker-group {
  display: flex;
  gap: .5em;
  place-content: center;
  width: 250px;
  margin-top: .75rem;
}

HTML代码：

<zxx-slide>
  <a href="###"><img src="ps1.jpg"></a>
  <a href="###"><img src="ps2.jpg"></a>
  <a href="###"><img src="ps3.jpg"></a>
  <a href="###"><img src="ps4.jpg"></a>
</zxx-slide>