swiper3d横向滚动多张炫酷切换banner
最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来mark一下。一眨眼过了一个月,9月这段期间项目多,还带着小徒弟做项目,一边教还要一边赶进度。真的是超级无敌累,不过看着他慢慢有所成长也是有点欣慰的。终归还是自己懒,放草稿箱里的文章总结就一直放着了没继续着重去写。
最近这段时间主要做h5页面,对接公众号。用的是vue来写的h5项目页面,这个项目其实是小徒弟做的……然而加了一堆的乱七八糟的插件的方法,现在还得重新梳理。不然被老大发现的话会死得很惨。
其中有一个需求是要求像elementUI里边走马灯的卡片化card,如下:
但是除了需要这种3d效果之外,还需要h5手机端手动滑动,element是不支持的。当然我只是举个栗子,我的项目是要剔除了element直接用vux的。加上项目里边,有横向自动滚动相册、多个banner图。所以我这块才把目光放到swiper
使用npm安装,请直接去npm里边查看 这里可以点击→ https://www.npmjs.com/package/vue-awesome-swiper
我的完成效果:
当然有人喜欢把下边的黑色阴影用分页器加上box shadow 四周阴影呈现出来,我这块是用了一张阴影图,没有使用到分页器。而且自动滚的3d效果确实比element 走马灯card还要炫酷,我这里用的是swiper3。
上代码:(博客园不好调整代码缩进,将就着看哈)
html
1 <div class="successNav"> 2 <swiper :options="swipersuccess"> 3 <!-- <swiper-slide v-for="(item,index) in indexContentTwo[2].children" :key="index"><img :src="item.picture" alt=""></swiper-slide> --> 4 <swiper-slide><img src="../assets/images/img/banner.png" alt=""></swiper-slide> 5 <swiper-slide><img src="../assets/images/img/group3.png" alt=""></swiper-slide> 6 7 </swiper> 8</div>
data数据
data(){ return{ swipersuccess:{ effect:"coverflow", grabCursor: true, watchSlidesProgress: true, centeredSlides: true, loop: true, loopedSlides: 3, slidesPerView: 3, autoplay: { delay: 3000,//自动播放速度 disableOnInteraction: false//鼠标移上去时是否还继续播放 }, coverflowEffect: { // rotate: 50, // stretch: 0, // depth: 500, // modifier: 1, // slideShadows : true rotate: 30, stretch: 0, depth: 60, modifier: 6, slideShadows : false }, }, } }
生命周期
computed: { swiper() { return this.$refs.mySwiper.swiper; } },
css(根据业务需求自行改动)
.successNav .swiper-slide.swiper-slide-active img { transform: scaleX(1.6); border-radius: 5px; } .successNav .swiper-slide.swiper-slide-duplicate-prev img, .successNav .swiper-slide.swiper-slide-next img, .successNav .swiper-container-3d .swiper-slide-shadow-right, .successNav .swiper-container-3d .swiper-slide-shadow-left, .successNav .swiper-slide.swiper-slide-prev img, .successNav .swiper-slide.swiper-slide-prev{ border-radius: 5px !important; }
如果不是使用vue的小伙伴也别着急,还是有案例可以直接用js+html的
这里好像插入不了压缩包诶,有需要的小伙伴可以留邮箱发哈,有swiper4和swiper3两个版本的html+js的写法。和前面适用vue的一样,能自动滚,也能手机触摸手滑滚动
- 移动Web 开发中的一些前端知识收集汇总
- Angularjs基础(七)
- WordPress 中八个有用的代码片段
- 【释疑文】DeveMobile、EaseMobile 及Devework 主题的区别
- DeveMobile/EaseMobile 主题双双更新1.1,增加离线存储,社交媒体关注等功能
- Angularjs基础(六)
- 如果机器人拥有痛觉,这个世界会怎样
- 阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
- 专门攻击工资支付系统的网络犯罪
- Angularjs基础(五)
- DW Replace Open Sans:将WordPress 后台中的open-sans字体加载源从Google Fonts换为360 CDN
- Google Fonts 已可正常访问,相关插件可卸
- 微信支付宝完成这几个设置,别人偷不走你一毛钱!
- Angularjs基础(四)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- jQuery 效果
- jQuery 样式操作
- Nginx 限制资源的访问
- 如何设计一个秒杀系统
- Linux下登录凭证窃取技巧
- kali修改root密码
- PPT画成这样,述职答辩还能过吗?
- 详解 Cookie,Session,Token
- SSM 单体框架 - 前端开发:课程和广告模块
- 80 行 Python 代码写个图形计算器
- 近期对libatapp的一些优化调整(增加服务发现和连接管理,支持yaml等)
- SSM 单体框架 - 前端开发:用户和权限模块
- Cnitch:一款Docker引擎运行进程权限检测工具
- SAP Spartacus BrowserPlatformLocation的初始化逻辑
- 重启 CentOS 7 系统后的 IP 地址问题