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