GSAP ScrollTrigger 水平滚动未按预期结束

如何解决GSAP ScrollTrigger 水平滚动未按预期结束

在我的 shopify 网站上向下滚动图像时尝试水平滚动。但是 ScrollTrigger 的结尾并没有在最后一个部分/图像处结束。当最后一张图片到达浏览器的右侧时，如何修复结束函数以结束滚动触发器 there is unwanted padding

gsap.registerPlugin(ScrollTrigger);


let sections = gsap.utils.toArray(".product-image");

gsap.to(sections,{
     xPercent: -100 * (sections.length -1),ease: "none",scrollTrigger: {
      trigger: ".product-image-section",markers: true,pin: true,scrub: true,end: () => "+=" +
    document.querySelector(".product-image").offsetWidth
    }
  });

img {
  width: auto;
  height: 100%;
  border-style: solid;
  border-width: 2px;
  border-color: green;
}
.product-image-section{
   height: 73vh;
   z-index: -1;
  border-style: solid;
  border-width: 2px;
  border-color: red;
}
.container-main{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100%;
  width: 38%; 

}

<div class="product-image-section">
  <div class="container-main">
    {% for image0 in product.images %}

      <img class="product-image" src=" {{ image0.src | img_url: '500x' }} " alt="11954" >

    {% endfor %}
  </div>

</div>