使用Swiper+styled-components制作轮播：卡片居中及冗余空间问题求助

问题描述 #

使用Swiper库制作轮播组件时遇到两个问题：

• 卡片元素无法居中显示
• Wrapper div占用额外空间，导致下一个元素无法在屏幕上展示

关键代码 #

import styled from 'styled-components';
import { motion } from 'framer-motion';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';

const Wrapper = styled(motion.div)`
  height: 200px;
  min-width: 300px;
  width: 300px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  position: relative;

  &:hover ${Desc} {
    transform: translateY(0%);
  }
`;

const Card = () => {
  return (
    <Swiper pagination={true} modules={[Pagination]}>
      {sliderItems.map((item) => {
        return (
          <SwiperSlide key={item.id}>
            <Wrapper>
              <Title>{item.title}</Title>
              <Desc>{item.desc}</Desc>
              <Img src={item.img} />
            </Wrapper>
          </SwiperSlide>
        );
      })}
    </Swiper>
  );
};

解决方案 #

1. 实现卡片居中显示 #

给Swiper组件添加以下核心属性：

• centeredSlides={true}：让当前激活的slide在容器中居中
• slidesPerView="auto"：让slide宽度自适应内部内容（也可设置具体数值如slidesPerView={1}）
• 给SwiperSlide添加flex居中样式，确保内部Wrapper水平居中

2. 解决Wrapper额外空间问题 #

• 设置spaceBetween属性控制slide之间的间距，避免默认间距导致的空间浪费
• 移除Wrapper的min-width，确保宽度固定为300px，避免不必要的空间占用

修改后的完整代码：

import styled from 'styled-components';
import { motion } from 'framer-motion';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';

const Wrapper = styled(motion.div)`
  height: 200px;
  width: 300px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  position: relative;

  &:hover ${Desc} {
    transform: translateY(0%);
  }
`;

const StyledSwiperSlide = styled(SwiperSlide)`
  display: flex;
  justify-content: center;
`;

const Card = () => {
  return (
    <Swiper 
      pagination={true} 
      modules={[Pagination]}
      centeredSlides={true}
      slidesPerView="auto"
      spaceBetween={20}
    >
      {sliderItems.map((item) => {
        return (
          <StyledSwiperSlide key={item.id}>
            <Wrapper>
              <Title>{item.title}</Title>
              <Desc>{item.desc}</Desc>
              <Img src={item.img} />
            </Wrapper>
          </StyledSwiperSlide>
        );
      })}
    </Swiper>
  );
};

效果说明 #

• centeredSlides确保当前轮播卡片处于容器视觉中心，匹配你期望的展示效果
• slidesPerView="auto"让每个slide宽度由内部Wrapper决定，避免强制宽度导致的空间浪费
• spaceBetween设置slide间的固定间距，避免Wrapper的额外空间挤压后续元素
• 自定义SwiperSlide的flex布局，确保内部卡片在slide范围内水平居中

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