如何在react-id-swiper中正确居中对齐图片并缩小轮播图间距

1. 轮播组件页面居中 #

首先在全局样式（你的index.css文件）中添加以下代码，给swiper容器设置宽度限制并水平居中：

/* swiper容器居中配置 */
.swiper-container {
  width: 100%;
  max-width: 900px; /* 可根据页面需求自定义最大宽度 */
  margin: 0 auto !important; /* 水平居中，加!important避免被默认样式覆盖 */
  padding-top: 50px;
  padding-bottom: 50px;
}
/* 适配slidesPerView: 'auto'的配置，固定slide宽度和你的图片尺寸匹配 */
.swiper-slide {
  width: 300px;
  height: auto;
}

2. 缩小轮播图片间距 #

通过两个参数组合调整即可，修改你的swiper参数配置：

• 调整coverflowEffect下的stretch参数：负值为缩小间距，正值为拉大间距，你原先设置的0可以调整到-30~-10区间测试效果
• 新增spaceBetween全局间距参数：单位为px，负数也可以缩小整体slide间距

调整后的params参考代码：

const params = {
  effect: 'coverflow',
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  spaceBetween: -15, // 新增全局间距配置
  coverflowEffect: {
    rotate: 50,
    stretch: -20, // 修改此处调整coverflow专属间距
    depth: 100,
    modifier: 1,
    slideShadows: true,
  },
  pagination: {
    el: '.swiper-pagination',
  },
};

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