SwiperJS布局疑问：如何让两组幻灯片居中且不撑满容器

我正在使用SwiperJS开发一个滑块，要求每组显示2个幻灯片并在容器内居中。当前实现中幻灯片会撑满容器的全部可用宽度，不符合需求，理想状态是幻灯片仅占用容器部分宽度且保持居中。

已尝试以下方案但未解决问题：

• 为幻灯片设置flex、justify-content: center、margin-inline: auto及width: fit-content；
• 限制swiper-container宽度。

相关代码 #

JavaScript #

$.getScript(
      "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js",
      function () {
        new Swiper(".customSwiper", {
          grabCursor: true,
          slidesPerView: 2,
          centeredSlides: false,
          spaceBetween: 10,
          loop: false,  
          slidesPerGroup: 2,  
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      }
    );

CSS #

/* swiper */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: unset !important;
}
.swiper-container {
  width: 100vw;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #FFF;
  max-width: unset !important;
}
/* card being displayed */
.card {
  border-radius: 25px;
  background: #F8F8F8;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 5fr;
  max-width: 30em;
  width: fit-content;
  column-gap: 24px;
  }

1. 调整Swiper核心配置 #

修改初始化参数，让幻灯片宽度自适应内容并开启居中模式：

new Swiper(".customSwiper", {
  grabCursor: true,
  slidesPerView: 'auto', // 取消固定数量，让幻灯片宽度由内部卡片决定
  centeredSlides: true, // 开启居中布局
  spaceBetween: 10,
  loop: false,  
  slidesPerGroup: 2, // 保持每次滑动切换2组
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  centeredSlidesBounds: true, // 可选：确保滑动边界正确适配居中布局
});

2. 修正CSS样式 #

• 移除.swiper-slide中强制撑满宽度的属性，让幻灯片宽度跟随内部卡片：

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* 删除 width: 100%; 和 max-width: unset !important; */
}

• 调整.swiper-container的宽度设置，让容器自身居中并限制最大宽度（避免过宽）：

.swiper-container {
  max-width: calc(30em * 2 + 10px); /* 两张卡片宽度+间距，可根据需求调整 */
  margin: 0 auto; /* 容器水平居中 */
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #FFF;
}

• 保留.card的现有样式，确保width: fit-content和max-width:30em生效。

3. 验证效果 #

完成上述修改后，幻灯片会根据内部卡片的宽度自适应，两组幻灯片会整体居中在容器内，不会撑满容器宽度。如果需要调整整体居中的间距，可微调.swiper-container的max-width或padding属性。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo