nolimits4web/swiper

入门指南 | 文档 | 演示

# Swiper Swiper - 是免费且最现代的移动端触摸滑块，具有硬件加速过渡和惊人的原生行为。它旨在用于移动网站、移动 Web 应用以及移动原生/混合应用。 Swiper 并不兼容所有平台，它是一个现代的触摸滑块，仅专注于现代应用/平台，以带来最佳的体验和简洁性。 ## 功能 - **支持 Tree-shaking**：只有你使用的模块才会被导入到你的应用包中。 - **移动端友好**：旨在用于移动网站、移动 Web 应用以及移动原生/混合应用。 - **库无关性**：Swiper 不需要像 jQuery 这样的任何 JavaScript 库，这使得 Swiper 更小、更快。它可以安全地与 jQuery、Zepto、jQuery Mobile 等库一起使用。 - **1:1 触摸移动**：默认情况下，Swiper 提供 1:1 的触摸移动交互，但可以通过 Swiper 设置配置此比例。 - **Mutation Observer**：Swiper 提供了启用 Mutation Observer 的选项，启用后，如果你对 DOM 或 Swiper 的样式本身进行动态修改，Swiper 将自动重新初始化并重新计算所有必需的参数。 - **丰富的 API**：Swiper 附带非常丰富的 API。它允许创建自定义的分页器、导航按钮、视差效果等。 - **RTL 支持**：Swiper 是唯一提供 100% RTL 支持并具有正确布局的滑块。 - **多行幻灯片布局**：Swiper 允许多行幻灯片布局，每列可包含多个幻灯片。 - **过渡效果**：淡入淡出 (Fade)、翻转、3D 立方体 (3D Cube)、3D 封面流 (3D Coverflow)。 - **双向控制**：Swiper 可以用作任意数量其他 Swiper 的控制器，甚至可以同时被控制。 - **完整的导航控制**：Swiper 附带所有必需的内置导航元素，例如分页器、导航箭头和滚动条。 - **Flexbox 布局**：Swiper 使用现代的 flexbox 布局来排列幻灯片，这解决了很多尺寸计算的问题并节省了时间。这种布局还允许使用纯 CSS 来配置幻灯片网格。 - **最灵活的幻灯片布局网格**：Swiper 在初始化时提供了大量参数，以使其尽可能灵活。你可以控制每个视图、每列、每组的幻灯片数量、幻灯片之间的间距等等。 - **图片懒加载**：Swiper 懒加载会延迟加载非活动/不可见幻灯片中的图片，直到用户滑动到它们。这样的功能可以使页面加载更快，并提高 Swiper 的性能。 - **虚拟幻灯片**：Swiper 附带虚拟幻灯片功能，当你有大量幻灯片或包含大量内容/图片的幻灯片时，此功能非常出色，因为它只会在 DOM 中保留所需数量的幻灯片。 - **循环模式** - **自动播放** - **键盘控制** - **鼠标滚轮控制** - **嵌套滑块** - **历史导航** - **哈希导航** - **断点配置** - **无障碍访问 (A11y)** - **以及更多 ...** ## Dist / 构建 在生产环境中，请仅使用 `dist/` 文件夹中的文件（JS 和 CSS），那里包含最稳定的版本。 ### 开发构建 在仓库的根目录下安装所有依赖： ``` $ npm install ``` 并构建 Swiper 的开发版本： ``` $ npm run build ``` 结果可在 `dist/` 文件夹中找到。 ### 运行演示： 所有演示均位于 `./playground` 文件夹中。在那里你可以找到 Core (HTML, JS)、React 和 Vue 版本。 要打开演示，请运行： - **Core**：`npm run core` - **React**：`npm run react` - **Vue**：`npm run vue` ### 生产构建 ``` $ npm run build:prod ``` 生产版本将在 `dist/` 文件夹中可用。 ## 主要规划功能 - [最热门的功能请求](https://github.com/nolimits4web/swiper/issues?q=is%3Aissue+is%3Aopen+label%3A%22feature+request%22+sort%3Areactions-%2B1-desc+)（使用 👍 表情添加你的投票） - [最严重的 Bug 😱](https://github.com/nolimits4web/swiper/issues?q=is%3Aissue+is%3Aopen+-label%3A%22feature+request%22++sort%3Areactions-%2B1-desc+)（使用 👍 表情添加你的投票） ## 赞助商 ## 代码贡献者 这个项目的存在离不开所有贡献者。[[参与贡献](CONTRIBUTING.md)].

标签：CMS安全, DNS解析, Hybrid App, JavaScript, Mutation Observer, SEO优化, Swiper, Syscall, Tree-shaking, UI组件, Web开发, 响应式设计, 幻灯片效果, 开源项目, 数据可视化, 无需依赖, 硬件加速, 移动端开发, 移动端适配, 自定义脚本, 触摸交互, 触摸滑动, 轮播图