README

开始使用 | API 文档 | 示例

Swiper

Swiper - 是一款免费且最现代的移动端触摸滑块，拥有硬件加速的过渡效果和惊人的原生行为。它旨在用于移动网站、移动 Web 应用和移动原生/混合应用。

Swiper 与所有平台都不兼容，它是一款专注于现代应用/平台的现代触摸滑块，旨在提供最佳体验和简洁性。

赞助商

特性

可摇树：只有你使用的模块将被导入到你的应用包中。
移动友好：它旨在用于移动网站、移动 Web 应用和移动原生/混合应用。
无库依赖：Swiper 不需要任何 JavaScript 库（如 jQuery），这使得 Swiper 更小、更快。它可以安全地与 jQuery、Zepto、jQuery Mobile、等库一起使用。
1:1 触摸移动：默认情况下，Swiper 提供 1:1 触摸移动交互，但这个比例可以通过 Swiper 设置进行配置。
变异观察器：Swiper 允许启用变异观察器，当你在 DOM 或 Swiper 样式中进行动态更改时，Swiper 将自动重新初始化并重新计算所有所需参数。
丰富的 API：Swiper 附带非常丰富的 API。它允许创建自己的分页、导航按钮、视差效果等。
RTL 支持：Swiper 是唯一提供 100% RTL 支持且布局正确的滑块。
多行幻灯片布局：Swiper 允许多行幻灯片布局，每列有少量幻灯片。
过渡效果：淡入淡出、翻转、3D 立方体、3D 覆盖流。
双向控制：Swiper 可用作任何数量其他 Swipers 的控制器，甚至可以同时被控制。
完整导航控制：Swiper 提供所有必需的内置导航元素，如分页、导航箭头和滚动条。
Flexbox 布局：Swiper 使用现代 Flexbox 布局进行幻灯片布局，解决了许多大小计算问题。这种布局还允许使用纯 CSS 配置幻灯片网格。
最灵活的幻灯片布局网格：Swiper 在初始化时有许多参数，使其尽可能灵活。您可以控制每视图、每列、每组的幻灯片数量，幻灯片之间的空间等。
图片懒加载：Swiper 懒加载功能会延迟加载非活动/不可见的幻灯片中的图片，直到用户滑动到它们。这个功能可以使页面加载更快，并提高 Swiper 性能。
虚拟幻灯片：Swiper 附带虚拟幻灯片功能，当您有大量幻灯片或内容丰富/图像丰富的幻灯片时，该功能将仅在 DOM 中保留所需的幻灯片数量。
循环模式
自动播放
键盘控制
鼠标滚轮控制
嵌套滑块
历史导航
哈希导航
断点配置
无障碍访问（A11y）
还有很多...

社区

Swiper 社区可以在 GitHub 讨论区找到，您可以在那里提问、发表想法和分享您的项目。

我们的行为准则适用于所有 Swiper 社区渠道。

Dist / Build

在生产环境中，仅使用dist/文件夹中的文件（JS 和 CSS），将获得最稳定的版本。

开发构建

在仓库根目录安装所有依赖项


$ npm install

并构建 Swiper 的开发版本


$ npm run build

结果在dist/文件夹中可用。

运行演示

所有演示都位于./playground文件夹中。在那里您可以找到核心（HTML、JS）、React 和 Vue 版本。要打开演示，请运行：

核心: npm run core
React: npm run react
Vue: npm run vue

生产构建


$ npm run build:prod

生产版本将在dist/文件夹中提供。

贡献

所有更改都应提交到src/文件。在您提出问题之前，请查阅贡献指南。

主要路线图功能

顶级功能请求（使用👍反应添加您自己的投票）
顶级错误 😱（使用👍反应添加您自己的投票）

贡献者

代码贡献者

本项目的存在归功于所有贡献者。[贡献].

财务贡献者

成为财务贡献者，帮助我们维持社区。[贡献]

nolimits4web / swiper

维护者

详细信息