如何在Swiper中实现双居中滑块布局且图片不压缩？

需求说明：页面已集成Swiper组件，每个swiper-slide内包含一张宽660px、高600px的图片，需实现以下布局效果：

• 中间区域显示两个完整滑块
• 左右两侧各显示半个滑块
• 保证图片不被压缩

布局示意图：

现有代码 #

JavaScript

const swiper = new Swiper(".main-slider", {
  loop: true,
  centeredSlides: true,
  spaceBetween: 30,
});

CSS

.main-slider .swiper-slide img {
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
  border-radius: 40px;
  height: 600px;
  width: 100%;
}

.main-slider .swiper-slide {
  width: 100% !important;
  max-width: 673px !important;
}

HTML

<div class="slider-container swiper main-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="./img/slider-1.png" alt="">
    </div>
    <div class="swiper-slide"><img src="./img/slider-2.png" alt=""></div>
    <div class="swiper-slide"><img src="./img/slider-3.png" alt=""></div>
    <div class="swiper-slide"><img src="./img/slider-4.png" alt=""></div>
  </div>
</div>

修改后实现方案 #

核心调整思路

1. 固定滑块与图片的原始尺寸，避免压缩变形
2. 给容器设置左右内边距，预留两侧半滑块的显示空间
3. 调整Swiper配置，让滑块自适应显示并保持居中对齐

修改后的代码

JavaScript

const swiper = new Swiper(".main-slider", {
  loop: true,
  centeredSlides: true,
  slidesPerView: 'auto', // 让滑块根据自身宽度自适应显示数量
  spaceBetween: 30, // 保持滑块间的间距
});

CSS

/* 容器设置左右内边距，露出两侧滑块的一半 */
.main-slider {
  padding: 0 330px; /* 330px为图片宽度660px的一半 */
}

.main-slider .swiper-slide img {
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
  border-radius: 40px;
  width: 660px; /* 固定图片原始宽度 */
  height: 600px; /* 固定图片原始高度 */
  object-fit: cover; /* 图片比例偏差时保持填充（可选改为contain显示完整图片） */
}

.main-slider .swiper-slide {
  width: 660px !important; /* 固定滑块宽度与图片一致 */
}

HTML（无需修改）

保持原有结构即可。

内容的提问来源于stack exchange，提问作者userName