Swiper - 开源、免费、强大的触摸滑动插件

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

Swiper 的结构和基础原理

Swiper 的每个展示块(屏)为一个slide,slide中放置图片或文字等展示的内容,全部slide排成一行(或多行)包含在包装器wrapper中,而总容器container 又包裹着wrapper和箭头按钮控件navigation以及分页器控件pagination。

当手指(或鼠标)触摸滑动Swiper时,Swiper在浏览器每一帧通过计算滑动的距离差对wrapper进行位移(transform)从而产生拖动的效果。在手指(或鼠标)释放时,计算下一个slide的起始位置对wrapper设置位移动画(transition),从而产生切换动画效果。

Swiper拥有灵活的progress,这是自定义制作3D切换效果的利器

Swiper制作3D切换效果的方法多种多样。cubecoverflowflip可以轻松的实现3D过渡,如果你想制作其他新颖的切换方式,推荐使用progress

progress可以帮助你获取到滑块的进度索引。

在Swiper上加些小动画,制作时下最流行的微展示

使用Swiper再配合一些你喜欢的小动画,你的图片立即变成活灵活现的微场景、微海报。

常用的制作动画的方法有CSS3、GreenSock、Anime.js、animate.css等。也推荐使用我们的Swiper Animate小插件,无需学习即可快速制作出精美的切换动画效果。

Swiper Animate有大量的demo,下载后进行简单修改即可,是伸手党的最爱。

Swiper 5 的特色功能

Swiper - 开源、免费、强大的触摸滑动插件-Npcink

下载文件中提供 swiper5 完整包,包含Swiper5的全部基础演示和未压缩的js、css文件

下载权限

查看
  • ¥{{right.value}}
    {{right.value}}
    免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
Designer

CSSFX - 简单的获取酷炫的CSS效果

2019-11-28 12:10:49

Designer

jsDelivr –开源CDN,免费,快速且可靠

2020-1-27 16:00:16

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索