项目演示地址

https://code.ifrontend.net/case/swiper-react

Swiper React 演示项目

一个基于 React.js 和 Tailwind CSS 的 Swiper 组件演示项目，包含了 Swiper 的所有主要功能和效果的完整实现。Swiper 是一款专注于移动端触摸滑动交互的开源插件 ‌，提供轮播图、画廊、内容切换等功能，具有高性能、多特效、跨平台兼容和易定制化特点。支持 JavaScript 原生实现与 CSS 滚动吸附两种技术路径，适用于网页开发中的动态内容展示场景。‌‌

🚀 项目特性

• 完整的 Swiper 功能演示 – 包含 40+ 种不同的 Swiper 效果和配置
• React.js 实现 – 使用现代 React Hooks 和函数组件
• Tailwind CSS 样式 – 现代化的响应式设计
• 实时代码预览 – 每个演示都包含完整的源代码展示
• 响应式设计 – 适配移动端和桌面端

📦 技术栈

• React.js 18 – 前端框架
• Swiper.js – 现代化的触摸滑动组件
• Tailwind CSS – 原子化 CSS 框架
• Vite – 快速的构建工具
• React Syntax Highlighter – 代码高亮显示

🎯 演示功能

基础功能

• ✅ 基础滑动
• ✅ 按钮切换
• ✅ 弹性切换
• ✅ 分页器（点状、动态、进度条、分数、自定义）
• ✅ 滚动条

布局和方向

• ✅ 垂直滑动
• ✅ 垂直嵌套
• ✅ 间距设置
• ✅ 过渡开始
• ✅ 多个 slides 显示
• ✅ slides 缩放
• ✅ 自动宽度
• ✅ 居中显示
• ✅ CSS 模式

高级功能

• ✅ 自由模式
• ✅ 滚动容器
• ✅ 网格布局
• ✅ 嵌套滑动
• ✅ 抓取光标
• ✅ 循环模式
• ✅ 循环分组

视觉效果

• ✅ 淡入淡出
• ✅ 立方体
• ✅ 封面流
• ✅ 翻转效果
• ✅ 卡片效果
• ✅ 创意切换
• ✅ 进度效果
• ✅ 截断效果

交互控制

• ✅ 键盘控制
• ✅ 鼠标滚轮控制
• ✅ 自动播放
• ✅ 自动播放进度条
• ✅ 动态 slides
• ✅ 缩略图画廊
• ✅ 散列导航
• ✅ 历史记录

响应式和优化

• ✅ RTL 布局
• ✅ 视差效果
• ✅ 延迟加载图片
• ✅ 响应式断点
• ✅ 响应式断点比例
• ✅ 自动高度
• ✅ 缩放功能
• ✅ 虚拟 slides

扩展功能

• ✅ 自定义插件
• ✅ 可滑动菜单
• ✅ 动态改变方向

🛠️ 安装和运行

环境要求

• Node.js 16+
• npm 或 yarn

安装依赖

npm install
# 或
yarn install

启动开发服务器

npm run dev
# 或
yarn dev

构建生产版本

npm run build
# 或
yarn build

📁 项目结构

src/
├── components/
│   └── swiper/
│       ├── index.jsx                 # 主入口组件
│       └── components/               # 各种 Swiper 演示组件
│           ├── Default.jsx           # 基础滑动
│           ├── Navigation.jsx        # 按钮切换
│           ├── Pagination.jsx        # 分页器
│           ├── EffectFade.jsx        # 淡入淡出效果
│           ├── EffectCube.jsx        # 立方体效果
│           ├── Parallax.jsx          # 视差效果
│           ├── VirtualSlides.jsx     # 虚拟slides
│           ├── AutoHeight.jsx        # 自动高度
│           ├── Zoom.jsx              # 缩放功能
│           ├── CustomPlugin.jsx      # 自定义插件
│           ├── SlideableMenu.jsx     # 可滑动菜单
│           ├── ChangeDirection.jsx   # 动态改变方向
│           └── ...                   # 更多组件
├── assets/                           # 静态资源
│   ├── nature-1.jpg
│   ├── nature-2.jpg
│   └── ...
└── App.jsx                          # 应用入口

🎨 使用示例

基础用法

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

function MySwiper() {
  return (
    <Swiper
      modules={[Navigation, Pagination]}
      navigation
      pagination={{ clickable: true }}
      spaceBetween={30}
      slidesPerView={3}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
}

响应式断点

<Swiper
  breakpoints={{
    320: {
      slidesPerView: 1,
      spaceBetween: 20,
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 40,
    },
    1024: {
      slidesPerView: 4,
      spaceBetween: 50,
    },
  }}
>
  {/* slides */}
</Swiper>

动态改变方向

const getDirection = () => {
  return window.innerWidth <= 760 ? "vertical" : "horizontal";
};

<Swiper
  slidesPerView={3}
  direction={getDirection()}
  navigation={{
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  }}
  onResize={(swiper) => {
    swiper.changeDirection(getDirection());
  }}
>
  {/* slides */}
</Swiper>;

视差效果

<Swiper modules={[Parallax]} parallax={true} speed={600}>
  <SwiperSlide>
    <div data-swiper-parallax="-23%">
      <img src="background.jpg" alt="Background" />
    </div>
    <div data-swiper-parallax-x="-300">
      <h2>标题</h2>
    </div>
  </SwiperSlide>
</Swiper>

虚拟 Slides

<Swiper
  modules={[Virtual, Pagination]}
  virtual
  pagination={{ clickable: true }}
  slidesPerView={3}
  centeredSlides={true}
  spaceBetween={30}
>
  {virtualData.slides.map((slideContent, index) => (
    <SwiperSlide key={slideContent} virtualIndex={index}>
      {slideContent}
    </SwiperSlide>
  ))}
</Swiper>

🌟 核心特性说明

虚拟 Slides

支持大量 slides 的高性能渲染，只渲染可见的 slides，大幅提升性能。

响应式设计

根据屏幕尺寸自动调整 slides 数量和间距，提供最佳的用户体验。

丰富的视觉效果

包含淡入淡出、立方体、封面流、翻转等多种 3D 和 2D 过渡效果。

高级交互

支持键盘、鼠标滚轮、触摸手势等多种交互方式。

自定义插件

展示如何创建自定义 Swiper 插件，实现调试功能和事件监听。

📱 移动端优化

• 触摸手势支持
• 响应式断点
• 垂直滑动模式
• 自适应高度
• 延迟加载优化

🔧 自定义配置

项目中的每个演示都可以作为独立组件使用，你可以：

1. 复制对应组件的代码
2. 根据需求调整配置参数
3. 修改样式和布局
4. 添加自定义功能

📖 文档参考

• Swiper 官方文档
• Swiper React 组件
• Tailwind CSS 文档

🙏 致谢

感谢 Swiper.js 团队提供如此优秀的滑动组件库。