nolimits4web/swiper

这是什么？

核心功能

• 01触摸优先的滑块，触摸跟随比例可配置。
• 02基于 Flexbox 的布局，可控制每页显示数量、分组和间距。
• 03内置分页器、导航箭头和滚动条。
• 04支持淡入淡出、翻转、3D 立方体和 3D 覆盖流切换效果。
• 05提供图片懒加载和虚拟幻灯片，适合图片多或内容量大的轮播。
• 06支持 Tree-shaking，自带 TypeScript 类型，不依赖 jQuery。

适用场景

• 在移动端友好的网站中制作图片画廊或商品轮播。
• 为移动 Web 应用添加可滑动的引导页或横幅区域。
• 通过 CSS 配置实现多行或多列的幻灯片布局。
• 让缩略图滑块与主滑块相互联动控制。

快速上手

1. 1

   从 npm 安装 Swiper

   npm install swiper
2. 2

   构建开发版本（在克隆的仓库根目录中运行）

   npm install && npm run build
3. 3

   运行 playground 文件夹中的 Core 演示

   npm run core

使用前须知

• !并非兼容所有平台，仅面向现代浏览器和移动应用。

标签

常见问题

swiper 是什么？

免费的移动端触摸滑块库，支持硬件加速过渡动画，无需 jQuery 依赖。 Swiper 是一个专注于触摸交互的 JavaScript 滑块库，适用于移动端网站、移动 Web 应用以及原生或混合应用。幻灯片布局基于 Flexbox，可通过 CSS 与每页数量、每组数量、间距等初始化参数灵活配置网格。

swiper 可以免费使用吗？用的什么许可证？

swiper 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

swiper 还在维护吗？

活跃维护中。swiper 最近一次提交是在 2026年10月16日。

swiper 适合用来做什么？

在移动端友好的网站中制作图片画廊或商品轮播。 为移动 Web 应用添加可滑动的引导页或横幅区域。 通过 CSS 配置实现多行或多列的幻灯片布局。 让缩略图滑块与主滑块相互联动控制。

swiper 怎么安装和运行？

从 npm 安装 Swiper: npm install swiper 构建开发版本（在克隆的仓库根目录中运行）: npm install && npm run build 运行 playground 文件夹中的 Core 演示: npm run core

在哪里获取 swiper？

源代码和安装说明在 GitHub 上：https://github.com/nolimits4web/swiper