Swiper V7 React部分参数不生效，scrollbar、direction功能失效求助

问题排查与修复方案 #

1. Scrollbar不生效问题

你代码中仅在modules数组中注册了Scrollbar模块，但对应的scrollbar配置项处于注释状态，Swiper不会主动渲染未开启配置的组件，取消该配置项的注释即可正常显示滚动条。

2. direction设置为vertical无效问题

你需要同步修改以下几处配置：

• 垂直滚动模式要求Swiper的父容器有明确的固定高度，你可以直接给Swiper组件添加style={{height: '400px'}}属性指定高度，否则Swiper默认按水平模式自适应布局，方向配置不生效
• 你当前的centeredSlides属性传入的是字符串"true"，正确参数类型是布尔值true，错误的参数类型会导致内部配置优先级紊乱，覆盖direction的设置
• 你同时导入了全量的swiper-bundle.css和各个模块的单独样式文件，二者存在重复样式，可能引发样式冲突，保留swiper-bundle.css即可，无需重复导入模块样式
• effect="fade"默认适配水平方向，若要搭配垂直方向使用，建议升级到Swiper 8及以上版本，旧版本不支持该组合配置

修复后代码示例

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react/swiper-react.js";
import { Navigation, Pagination, Scrollbar, EffectFade, Lazy } from "swiper";

// 仅保留全量样式即可，无需重复引入模块样式
import "swiper/swiper-bundle.css";

export default function Scratchpad() {
  return (
    <Swiper
      modules={[Navigation, Pagination, Scrollbar, EffectFade, Lazy]}
      spaceBetween={10}
      slidesPerView={1}
      // 改为布尔值true
      centeredSlides={true}
      direction={"vertical"}
      navigation
      effect="fade"
      // 取消scrollbar注释
      scrollbar={{ draggable: true }}
      pagination={{ clickable: true }}
      // 明确指定Swiper高度
      style={{height: '400px'}}
      onSlideChange={() => console.log("slide change")}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
    </Swiper>
  );
}

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