CSS ::scroll-button实现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;

  a {
    scroll-snap-align: start;
  }
  img {
    display: block;
    width: 250px; height: 186px;
  }
}

zxx-slide::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: rgb(0 0 0 / 0.7);
  cursor: pointer;
  -webkit-text-stroke: 1px #fff;
}

zxx-slide::scroll-button(*):hover,
zxx-slide::scroll-button(*):focus {
  color: rgb(0 0 0 / 1);
}

zxx-slide::scroll-button(*):active {
  translate: 1px 1px;
}

zxx-slide::scroll-button(*):disabled {
  color: rgb(0 0 0 / 0.2);
  cursor: unset;
}
zxx-slide::scroll-button(left) {
  content: "◄";
}

zxx-slide::scroll-button(right) {
  content: "►";
}
zxx-slide {
  anchor-name: --myCarousel;
}

zxx-slide::scroll-button(*) {
  position: absolute;
  position-anchor: --myCarousel;
}
zxx-slide::scroll-button(*) {
  align-self: anchor-center;
}
zxx-slide::scroll-button(left) {
  right: calc(anchor(left) - 45px);
}

zxx-slide::scroll-button(right) {
  left: calc(anchor(right) - 45px);
}

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>