Swiper.js实现3个不同宽度幻灯片布局问题求助

需求 #

• 使用Swiper.js实现3个不同宽度的幻灯片展示
• 幻灯片需与下方盒子完美对齐

当前状态 #

当前幻灯片布局未与下方盒子对齐，显示效果不符合预期。

期望效果 #

幻灯片需呈现3个不同宽度的展示状态，且整体与下方盒子完美对齐。

当前Swiper配置 #

<Swiper
    className="mySwiper2 bg-white text-white"
    modules={[Navigation, Pagination, EffectFade]}
    spaceBetween={20}
    freeMode
    centeredSlides={true}
    parallax={true}

    breakpoints={{
        250: {
            slidesPerView: 1.1,
            spaceBetween: 10
        },
        640: {
            slidesPerView: 1.1,
            spaceBetween: 20,
        },
        1024: {
            slidesPerView: 1.5,
            spaceBetween: 20,
        }
    }}
    loop={true}
>

解决方案 #

要实现目标效果，需调整以下配置和样式：

1. 关闭居中滑动
   当前开启的centeredSlides={true}会让幻灯片居中显示，导致左右侧幻灯片超出容器范围，无法和下方盒子对齐。将其改为centeredSlides={false}。

2. 自定义幻灯片宽度
   给每个幻灯片设置不同的CSS宽度，示例如下：

   .swiper-slide:nth-child(1) { width: 85%; }
   .swiper-slide:nth-child(2) { width: 100%; }
   .swiper-slide:nth-child(3) { width: 85%; }
   

   可根据实际布局需求调整宽度数值。

3. 调整视图显示逻辑
   将slidesPerView设置为'auto'，让Swiper根据幻灯片实际宽度计算显示数量，同时简化断点配置：

   breakpoints={{
       250: {
           spaceBetween: 10
       },
       640: {
           spaceBetween: 20,
       },
       1024: {
           spaceBetween: 20,
       }
   }}
   

4. 可选：关闭自由滑动
   如果不需要自由拖动的效果，建议关闭freeMode，让幻灯片每次滑动到固定位置，更易保证对齐稳定性。

修改后的完整配置示例：

<Swiper
    className="mySwiper2 bg-white text-white"
    modules={[Navigation, Pagination, EffectFade]}
    spaceBetween={20}
    centeredSlides={false}
    parallax={true}
    slidesPerView="auto"

    breakpoints={{
        250: {
            spaceBetween: 10
        },
        640: {
            spaceBetween: 20,
        },
        1024: {
            spaceBetween: 20,
        }
    }}
    loop={true}
>

最后确保幻灯片的自定义宽度样式生效，即可实现3个不同宽度的幻灯片与下方盒子完美对齐的效果。

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