如何将HTML/CSS/Swiper JS实现的响应式博客卡片滑块适配到React项目

1. 安装Swiper依赖 #

先在项目根目录执行命令安装官方React版本的Swiper：

npm install swiper
# 用yarn的话执行 yarn add swiper
# 用pnpm的话执行 pnpm add swiper

2. 导入所需模块和样式 #

在你的滑块组件文件顶部导入对应的依赖、样式：

import { Swiper, SwiperSlide } from 'swiper/react';
// 导入需要用到的功能模块
import { Pagination, EffectFade, Mousewheel } from 'swiper/modules';
// 导入Swiper核心样式
import 'swiper/css';
// 导入功能模块对应的样式
import 'swiper/css/pagination';
import 'swiper/css/effect-fade';
// 这里继续导入你之前已经调整好的博客滑块自定义样式

3. 替换JSX结构并传入配置 #

把你之前转换好的JSX里的.blog-slider容器替换为Swiper组件，每个滑块项用SwiperSlide包裹，原有的JS配置直接作为props传给Swiper组件即可，不需要手动实例化Swiper：

const BlogSlider = () => {
  return (
    <Swiper
      modules={[Pagination, EffectFade, Mousewheel]}
      className="blog-slider"
      spaceBetween={30}
      effect="fade"
      loop={true}
      mousewheel={{
        invert: false
      }}
      pagination={{
        el: '.blog-slider__pagination',
        clickable: true
      }}
    >
      {/* 每个滑块项都用SwiperSlide包裹，保留你原来的内容和类名 */}
      <SwiperSlide className="blog-slider__item">
        {/* 第一个滑块的内容 */}
      </SwiperSlide>

      <SwiperSlide className="blog-slider__item">
        {/* 第二个滑块的内容 */}
      </SwiperSlide>

      {/* 更多滑块项以此类推 */}

      {/* 分页容器，和配置里的el对应，保留你原来的类名匹配自定义样式 */}
      <div className="blog-slider__pagination"></div>
    </Swiper>
  )
}

export default BlogSlider;

常见问题排查 #

• 如果分页样式不匹配，可以通过pagination的bulletClass属性自定义分页圆点的类名，和你原有CSS的类名对齐即可
• 如果你之前尝试过在useEffect里手动调用new Swiper创建实例，记得删除那部分代码，避免重复实例化导致功能异常
• 如果不需要完全复用原有自定义样式，也可以删掉自定义的分页类名，直接用Swiper默认的分页样式再做调整

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