Next.js+TypeScript中Swiper滑块centeredSlides显示裁剪问题求助

问题描述 #

我是编程新手，在Next.js + TypeScript项目中实现了Swiper滑块，基础功能正常。需求是显示6个滑块项并开启centeredSlides={true}，但开启后左右两侧的滑块项会被裁剪；添加centeredSlidesBounds={true}后仅初始状态正常，滑动后问题复现。

解决方案 #

• 给Swiper外层容器添加左右内边距：为滑块左右两侧预留显示空间，避免超出容器被裁剪
• 优化Swiper配置：移除centeredSlidesBounds={true}，通过slidesOffsetBefore和slidesOffsetAfter控制滑块偏移量，适配居中显示需求
• 确保滑块项宽度自适应：避免强制固定宽度，让滑块根据容器和slidesPerView自动计算宽度

修改后的组件代码 #

import React from "react";
import Image from "next/image";

import Bose from "public/images/sponsor/bose.png";
import Amazon from "public/images/sponsor/amazon.png";
import Microsoft from "public/images/sponsor/microsoft.png";
import Netflix from "public/images/sponsor/netflix.png";
import Samsung from "public/images/sponsor/samsung.png";
import Toyota from "public/images/sponsor/toyota.png";

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper";
import "swiper/css";

const Sponsor = () => {
  return (
    <div className="sponsor">
      <div className="container">
        <div className="row">
          <div className="col-12">
            <div
              className="sponsor__inner"
              data-aos="fade-up"
              data-aos-duration="400"
            >
              <div className="section__header">
                <h4 className="h4">Trusted by users and teams of all sizes</h4>
              </div>
              <div className="row">
                <div className="col-12">
                  <div className="wro">
                    <Swiper
                      slidesPerView={6}
                      spaceBetween={30}
                      loop={true}
                      centeredSlides={true}
                      slidesOffsetBefore={15}
                      slidesOffsetAfter={15}
                      modules={[Autoplay]}
                      autoplay={{ delay: 2000 }}
                    >
                      <SwiperSlide>
                        <div className="sponsor__slider-item">
                          <Image src={Bose} priority alt="Bose" />
                        </div>
                      </SwiperSlide>
                      <SwiperSlide>
                        <div className="sponsor__slider-item">
                          <Image src={Amazon} priority alt="Amazon" />
                        </div>
                      </SwiperSlide>
                      <SwiperSlide>
                        <div className="sponsor__slider-item">
                          <Image src={Microsoft} priority alt="Microsoft" />
                        </div>
                      </SwiperSlide>
                      <SwiperSlide>
                        <div className="sponsor__slider-item">
                          <Image src={Netflix} priority alt="Netflix" />
                        </div>
                      </SwiperSlide>
                      <SwiperSlide>
                        <div className="sponsor__slider-item">
                          <Image src={Samsung} priority alt="Samsung" />
                        </div>
                      </SwiperSlide>
                      <SwiperSlide>
                        <div className="sponsor__slider-item">
                          <Image src={Toyota} priority alt="Toyota" />
                        </div>
                      </SwiperSlide>
                    </Swiper>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Sponsor;

修改后的CSS #

// 04. sponsor
.sponsor {
  .sponsor__inner {
    padding: 65px;
    background-image: url("../../../public/images/sponsor/sponsor-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left bottom;
    border-radius: 20px;
  }

  .h4 {
    color: $white;
  }

  .wro {
    padding: 0 20px;
    overflow: visible;
  }

  .sponsor__slider-item {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    img {
      max-width: 100%;
      height: auto;
      transition: $transition;
      &:hover {
        filter: invert(82%) sepia(39%) saturate(369%) hue-rotate(111deg)
          brightness(400%) contrast(102%);
      }
    }
  }

  .swiper-slide-active {
    img {
      filter: invert(82%) sepia(39%) saturate(369%) hue-rotate(111deg)
        brightness(400%) contrast(102%);
    }
  }
}

补充说明 #

1. 移除了手动重复的滑块项，Swiper的loop模式会自动复制首尾滑块，无需手动添加
2. 添加modules={[Autoplay]}确保自动播放功能生效（如果需要）
3. .wro容器的overflow: visible允许滑块超出容器范围，配合内边距避免被裁剪
4. slidesOffsetBefore和slidesOffsetAfter用于微调滑块的左右偏移，让居中显示更自然

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