用clip-path实现slider从左向右轮播效果

<style>
.post-item__eyecatch {
        width: 100%;
        padding-top: 60%;
        position: relative;
        overflow: hidden;
      }
.post-item img {
        display: block;
        position: absolute;
        width: 100%;
        top: 0;
        height: 100%;
        object-fit: cover;
        object-position: center;
        min-width: 100%;
        min-height: 100%;
        clip-path: inset(0 100% 0 0);
        z-index: 1;
        transition: clip-path 1.2s ease 2s;
      }
      .post-item img.current {
        z-index: 5;
        clip-path: inset(0 0 0 0);
        transition: clip-path 2s cubic-bezier(0.67, 0.16, 0.26, 0.95) 0s;
      }
</style>
<div class="post-item__eyecatch">
          <img src="https://unium.jp/unium_cms/wp-content/uploads/2024/09/attractive_M.jpg"
            alt=""
          />
          <img
            src="https://unium.jp/unium_cms/wp-content/uploads/2024/09/attractive_M2.jpg"
            alt=""
          />
          <img
            src="https://unium.jp/unium_cms/wp-content/uploads/2024/09/attractive_M3.jpg"
            alt=""
          />
        </div>
<script>
      class eyeCatchClass {
        constructor(element, interval = 3000) {
          this.element = element;
          this.images = this.element.querySelectorAll("img");
          this.currentIndex = 0;
          this.interval = interval;
          this.timer = null;
        }
        updateImages() {
          this.images.forEach((img, index) => {
            if (index === this.currentIndex) {
              img.classList.add("current");
            } else {
              img.classList.remove("current");
            }
          });
          this.element.setAttribute("data-current-slide",this.currentIndex + 1);
          this.currentIndex = (this.currentIndex + 1) % this.images.length;
        }
        startSlider() {
          this.updateImages();
          this.timer = setInterval(() => this.updateImages(), this.interval);
        }
      }
      const eyeCatech = () => {
        document.querySelectorAll(".post-item__eyecatch").forEach((element) => {
          const eyeCatechElement = new eyeCatchClass(element);
          eyeCatechElement.startSlider();
        });
      };
      eyeCatech();</script>