Swiper Slide - 较小的上一张和下一张幻灯片，具有负间距

如何解决Swiper Slide - 较小的上一张和下一张幻灯片，具有负间距

我使用 transform: scale() 将非活动幻灯片制作得比活动幻灯片小，但是使用 spaceBetween 选项（设置为 -30）无法正常工作，因为最远的幻灯片保持空间...

知道如何保持相同的负间距吗？

HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png">
      <h1>Lorem ipsum dolor sit amet.<</h1>
      <hr>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="swiper-slide">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png">
      <h1>Lorem ipsum dolor sit amet.<</h1>
      <hr>
      <p>Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>                 
</div>

SCSS

body { background-color: grey; }
.swiper-slide {
  background-color: #FFF;
  transform: scale(0.7);
  z-index: 1;
  transition: all 0.5s ease;
  filter: drop-shadow(0 1rem 0.5rem rgba(96,153,228,0.2));
  
  &.swiper-slide-prev,&.swiper-slide-next {
    transform: scale(0.8);
    z-index: 2;
  }
  &.swiper-slide-active {
    transform: scale(1);
    z-index: 3;
  }
  
  img { width: 100%; }
}

JS

var slide = new Swiper('.swiper-container',{
  centeredSlides: true,speed: 600,loop: true,grabCursor: true,slidesPerView: 5,spaceBetween: -30,slideToClickedSlide: true
});

https://jsfiddle.net/jmg90e2b/