跳到主要内容
项目详情

Swiper11 是一款面向网页的纯 JavaScript 滑动特效插件,主要服务于手机、平板电脑等移动终端,也支持电脑网页中的滑动交互。它通过简单配置实现焦点图、Tab 切换、触摸导航和轮播图等常见效果,并提供演示、使用说明与 API 文档。与需要依赖公共库的方案不同,Swiper 无需加载 jQuery 等公共库即可运行,同时支持 React、Svelte、Vue.js、Angular 等流行前端框架,还提供多种触摸、布局、导航、懒加载和过渡能力。

核心功能

触摸滑动与常见网页组件

Swiper 可用于制作触屏焦点图、触屏 Tab 切换和触屏轮播图切换,也能实现移动端网站中的内容触摸滑动。官网示例包括触摸导航、自动播放焦点图和通过 slideTo 实现的内容 Tab 切换。默认触摸比例为 1:1,也可以通过修改设置改变触摸比例。

多种过渡与 3D 效果

Swiper 内置淡入、3D 方块、3D 流、3D 翻转、卡片和创意性等过渡效果。cube、coverflow、flip、cards 与 creative 可用于制作不同的 3D 切换效果。对于需要自定义切换方式的场景,还可以使用 progress 获取滑块的进度索引,并配合垂直切换和过渡回调制作宣传册等效果。

导航控制与双向控制

Swiper 配备分页器、切换箭头和滚动条等常用导航控制器,能够建立自定义分页器、导航和视差滚动效果。它还支持控制其他 Swiper,甚至可以让多个 Swiper 同时控制。官网 API 文档对导航、控制器以及相关参数和方法提供了单独说明。

框架适配与独立运行

Swiper 不需要加载 jQuery 等公共库即可运行,也可以在已经加载 jQuery、Zepto 或 jQuery Mobile 的环境中安全运行。从 Swiper6 版本开始,它提供了 React、Svelte、Vue.js 和 Angular 等前端框架的支持,可以将 Swiper 作为组件添加到这些框架中。

布局、性能与动态内容处理

Swiper 使用 Flexbox 布局,可通过 CSS 设置 Slides,并在初始化时配置每行、每列、每组显示数量及间距。它支持多行 Slides、视差效果、图片懒加载和虚拟 Slides;其中图片懒加载会延迟加载非 active slide 内的图片,虚拟 Slides 则可在内容较多时只在 DOM 中保留需要的 slide。开启监视器后,Swiper 会在 DOM 或 Swiper 样式发生动态变化时自动重新初始化并计算所需元素。

动画扩展与示例资源

Swiper 可以配合 CSS3、GreenSock、Anime.js 和 animate.css 制作微场景、微海报等动画效果。官网还提供 Swiper Animate 小插件,说明中称其无需学习即可快速制作切换动画,并提供了大量 demo,下载后可以进行简单修改。官网同时提供基础演示、移动端应用、PC 端应用和 API 文档入口,并保留 Swiper3、Swiper2 的演示与 API 页面。

使用方式

官网提供“开始使用 Swiper”页面、在线演示和 API 文档。使用者可以在手机或电脑网页中通过简单配置实现滑动功能,也可以将其作为 React、Svelte、Vue.js 或 Angular 组件使用。Swiper 本身由纯 JavaScript 打造,不要求加载公共库;官网还提供多个 demo 和下载入口。正文未说明注册流程,也未提到需要自备模型 Key。

适用人群与场景

移动端网站开发者可以用它制作内容触摸滑动、焦点图、触屏 Tab 和轮播图。网页设计师可以使用大量现成 demo 快速制作滑动页面效果。需要宣传册、微场景或微海报的制作人员,可以结合 3D 过渡、progress、Swiper Animate 及其他动画工具完成切换展示。使用 React、Svelte、Vue.js 或 Angular 的前端开发者,则可以把 Swiper 作为组件加入项目。

定价

Swiper 完全免费并开源,采用 MIT Licensed。官网没有提供分档付费方案或使用额度信息。

触摸滑动面向手机、平板电脑和网页提供焦点图、Tab、轮播图及触摸导航等滑动效果。
3D过渡效果内置淡入、3D方块、3D流、翻转、卡片和创意性等多种过渡效果。
前端框架支持支持将 Swiper 作为组件添加到 React、Svelte、Vue.js 和 Angular 等框架中。
丰富的导航控制提供分页器、切换箭头、滚动条及双向控制等导航与控制能力。
动态内容处理支持监视器、图片懒加载、虚拟 Slides、多行布局和 Flexbox 网格。

用户评论 (0)

还没有用户评论

成为第一个分享使用体验的人

查看更多

Swiper11 截图

官网首页截图

写评论

分享你的使用体验,至少 10 个字。评论可以发多条,打分在右侧卡片单独进行。

还需 10 个字 · 0 / 500