首页
在线演示
Swiper 基础演示
Swiper 精彩应用(移动)
Swiper 精彩应用(PC)
中文教程
Swiper 使用方法
Swiper Animate 使用方法
Swiper 与DOM
在React 中使用Swiper
在Svelte 中使用Swiper
在Angular 中使用Swiper
在Vue 中使用Swiper
在Vue 中使用低版本Swiper(3/4)
API 文档
获取Swiper
下载Swiper
Swiper CDN地址
关于我们
关于Swiper
优秀企业案例展示
联系我们/加群讨论
广告服务
友情链接
Swiper3
Swiper3 基础演示
Swiper3 移动端实例
Swiper3 电脑端实例
Swiper3 API 文档
Swiper2
Swiper2 基础演示
Swiper2 实例
Swiper2 API 文档
交流分享
Swiper 英文网
搜索
Swiper 基础演示
你可以下载以下全部实例:
下载地址
基础滑动(010)
在新窗口打开
Core
React
Vue
Angular
Svelte
Solid
按钮切换(020)
在新窗口打开
Core
React
Vue
Angular
Svelte
弹性切换
在新窗口打开
赞助商广告
分页器(030)
在新窗口打开
Core
React
Vue
Angular
Svelte
分页器 / 动态指示点(040)
在新窗口打开
进度条指示器(050)
在新窗口打开
分式指示器(060)
在新窗口打开
自定义指示器(070)
在新窗口打开
滚动条(080)
在新窗口打开
垂直切换(090)
在新窗口打开
slides之间设置间隔(100)
在新窗口打开
在过渡之前执行动画
在新窗口打开
带缓动的拖动效果
在新窗口打开
一次显示多个slides(110)
在新窗口打开
异形的slide
在新窗口打开
自定义slide宽度 / Carousel模式(120)
在新窗口打开
slides居中(130)
在新窗口打开
Slides居中 + 自定义Slides宽度(140)
在新窗口打开
CSS模式(145)
在新窗口打开
free模式 / 不贴合边缘(150)
在新窗口打开
内容滚动(160)
在新窗口打开
Slides 网格分布-多行多列(170)
在新窗口打开
在Swiper 中嵌套Swiper(180)
在新窗口打开
抓手光标(190)
在新窗口打开
Loop模式 / 无限循环(200)
在新窗口打开
Loop模式+ Slides分组(210)
在新窗口打开
分组跳过(211)
在新窗口打开
下拉释放刷新,上滑反弹加载
在新窗口打开
渐变切换(220)
在新窗口打开
3D方块切换(230)
在新窗口打开
3D滚动切换(240)
在新窗口打开
3D翻转切换(250)
在新窗口打开
赞助商广告
卡片切换(255)
在新窗口打开
多种创意切换-新窗口打开浏览(257)
在新窗口打开
Progress
在新窗口打开
另类的切换效果
在新窗口打开
同向切换+内页过长滚动
在新窗口打开
键盘控制(260)
在新窗口打开
鼠标控制(270)
在新窗口打开
自动切换(280)
在新窗口打开
动态Slides(290)
在新窗口打开
缩略图控制 / Swiper互相控制(300)
在新窗口打开
缩略图控制 / 无限循环(310)
在新窗口打开
一个页面中初始化多个Swiper(320)
在新窗口打开
散列导航(330)
在新窗口打开
历史记录(340)
在新窗口打开
RTL 布局(350)
在新窗口打开
视差效果(360)
在新窗口打开
延迟加载图片(370)
在新窗口打开
按屏幕宽度的响应式设置(380)
在新窗口打开
按屏幕宽高比的响应式设置(381)
在新窗口打开
自动高度(390)
在新窗口打开
缩放(400)
在新窗口打开
虚拟Slides(410)
在新窗口打开
自定义插件(420)
在新窗口打开
可滑动菜单(430)
在新窗口打开
改变切换方向(440)
在新窗口打开
Slides可见性判断(450)
在新窗口打开
倒带(500)
在新窗口打开
开始使用Swiper