UPD 2：更新脚本以处理JS幻灯片之间的间隙（这里是更新脚本的一部分（这里是fork with updates of your code）：

// ...

var percGap = 5; // gap between slides in percentages
var slideWidthWithGap = 100 + percGap;
var slideXPercent = (i) => i * slideWidthWithGap;

gsap.set(slides, {
  xPercent: slideXPercent,
});

var wrap = gsap.utils.wrap(
  -(slideWidthWithGap * 2),
  (numSlides - 2) * slideWidthWithGap
);
var timer = gsap.delayedCall(slideDelay, autoPlay);

var animation = gsap.to(slides, {
  xPercent: "+=" + numSlides * slideWidthWithGap,
  duration: 1,
  ease: "none",
  paused: true,
  repeat: -1,
  modifiers: {
    xPercent: wrap,
  },
});

// ...

要添加到幻灯片圆角，请将此添加到.slide

.slide {
  /* ... */
  border-radius: 1rem;
  overflow: hidden; /* crop block outside border */
}

与选项一样，您可以使用幻灯片填充来使其在视觉上分离：
使用CSS变量：

.slide {
  --slide-gap: 1rem;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: calc(100% / 1.5);
  padding-left: calc(var(--slide-gap, 0) / 2);
  padding-right: calc(var(--slide-gap, 0) / 2);
}

没有CSS变量：

.slide {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: calc(100% / 1.5);
  padding-left: .5rem;
  padding-right: .5rem;
}

这里是updated CodeSendbox。
UPD：要向幻灯片添加圆角，请更新.slide-content选择器：

.slide-content {
  border-radius: 1rem;
  /* another CSS props */
}