如何实现让.swiper-slide-active放大之后其他的swiper-slide分布在两侧，不被其覆盖

要实现这个效果，可以使用Swiper的回调函数和CSS的transform属性来实现。以下是实现步骤：

1. 在Swiper的初始化代码中添加onSlideChangeStart回调函数，用于在切换到新的slide时执行一些操作，例如：

var mySwiper = new Swiper('.swiper-container', {
  loop: true,
  onSlideChangeStart: function () {
    // 在切换到新的slide时执行一些操作
  }
});

2. 在回调函数中获取当前active slide的索引，以及其他slide的DOM元素，例如：

var activeIndex = mySwiper.activeIndex;
var prevSlide = mySwiper.slides[activeIndex - 1];
var nextSlide = mySwiper.slides[activeIndex + 1];

3. 在回调函数中设置其他slide的transform属性，使它们分布在active slide的两侧，例如：

prevSlide.style.transform = 'translateX(-100px)';
nextSlide.style.transform = 'translateX(100px)';

这里的translateX属性可以根据具体情况调整，用于控制其他slide的位置。

4. 在CSS中设置.active-slide的样式，用于放大active slide，例如：

.swiper-slide-active {
  transform: scale(1.2);
}

这里的scale属性可以根据具体情况调整，用于控制active slide的大小。

5. 最后，通过调整回调函数中的操作和CSS样式，可以实现不同的效果。

希望这些步骤能够对你有帮助。