swiper炫酷_swiper3d横向滚动多张炫酷切换banner
最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来mark一下。一眨眼过了一个月,9月这段期间项目多,还带着小徒弟做项目,一边教还要一边赶进度。真的是超级无敌累,不过看着他慢慢有所成长也是有点欣慰的。终归还是自己懒,放草稿箱里的文章总结就一直放着了没继续着重去写。
最近这段时间主要做h5页面,对接公众号。用的是vue来写的h5项目页面,这个项目其实是小徒弟做的……然而加了一堆的乱七八糟的插件的方法,现在还得重新梳理。不然被老大发现的话会死得很惨。
其中有一个需求是要求像elementUI里边走马灯的卡片化card,如下:
但是除了需要这种3d效果之外,还需要h5手机端手动滑动,element是不支持的。当然我只是举个栗子,我的项目是要剔除了element直接用vux的。加上项目里边,有横向自动滚动相册、多个banner图。所以我这块才把目光放到swiper
我的完成效果:
当然有人喜欢把下边的黑色阴影用分页器加上box shadow 四周阴影呈现出来,我这块是用了一张阴影图,没有使用到分页器。而且自动滚的3d效果确实比element 走马灯card还要炫酷,我这里用的是swiper3。
上代码:(博客园不好调整代码缩进,将就着看哈
1
2
3
4
5
6
7
8
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的一样,能自动滚,也能手机触摸手滑滚动
swiper炫酷_swiper3d横向滚动多张炫酷切换banner相关推荐
- unity 平移图片_Unity 两张背景的切换平移
两张背景图片向左移动,当屏幕看见的时候. 使用的是Unity自带的Sprite,当然也可以使用NGUI Sprite using UnityEngine; using System.Collectio ...
- 酷炫好看的横向滑动个人介绍简历模板
简介: 一款非常酷炫的个人介绍简历模板,鼠标滚动内容横向滑动效果,炫彩风格十分大气. 单页模板,带UI样式框架,可以自行开发更多功能,分享给大家参考. 网盘下载地址: http://kekewangL ...
- 仿网易/QQ空间视频列表滚动连播炫酷效果
代码地址如下: http://www.demodashi.com/demo/11201.html 一.准备工作 AndroidStudio 开发环境 需要下载七牛的开源播放器SDK 本例子实现了仿网易 ...
- swiper横向滚动
swiper横向滚动+鼠标悬停效果 效果 swiper滚动 项目地址 : https://gitee.com/webguoqing/swiper_scroll.git
- Android开发——自定义炫酷PickerView惯性滚动魔改
Android开发--自定义炫酷PickerView快速滚动魔改 最近由于课内压力的增加和安卓课设项目,故没有怎么刷acm题,基本上学校要训练也就去水一波,程序设计相关内容也鸽了. 由于从来没有做过开 ...
- 出彩的毕业论文岂能没有几张炫酷图表???(来看一下matplotlib怎样绘制炫酷表格)(上)
不知不觉在家已经待了三个多月,其他年级还好,在家写论文的小伙伴们不知进展如何?想要写一篇出彩得到导师赏识的文章,里面还能少得了几张炫酷的图表?这篇博客将写一下怎样用Python中matplotlib包 ...
- RecyclerView控件实现横向滚动和瀑布流布局,以及RecyclerView的点击监听(项目已上传GitHub)
先附上我的GitHub项目地址: https://github.com/Skymqq/RecyclerViewTest.git 我们已经知道,ListView的拓展性不好,它只能实现纵向的滚动的效果, ...
- php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章 先看一张效果图 思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
- 一个超酷的横向多列响应式布局效果
日期:2013-1-26 来源:GBin1.com 在线演示 还记得上周介绍的一个超酷的星际争霸2视差滚动效果吧,如果你希望生成一个类似ipad效果的漂亮横向多列响应式滚动效果的话,那么你可以考虑使 ...
最新文章
- 2018 ACM 国际大学生程序设计竞赛上海大都会赛重现赛 J Beautiful Numbers
- BugkuCTF-Misc:Linux2
- C++用递归方式实现在对不更改随机数组的情况下查找最大值
- thinkphp5带条件分页
- 小米为其他手机适配rom_让小米引以为傲的MIUI,为什么不再给其它手机适配了?...
- python基础的学习
- 和菜鸟一起学linux总线驱动之初识spi驱动数据传输流程【转】
- python打印对象地址_Python打印对象的全部属性
- 手机电子商务进入黄金时期 主机WAP功能受重视
- PHP如果某商品下的所有货品库存都为0,则下架该商品
- spring @Bean注解的使用
- 经典~吸引力法则:你相信什么,就会吸引什么,获得什么
- 京东充值系统现漏洞 被恶意盗刷
- redis源码阅读三-终于把主线任务执行搞明白了
- MATLAB求单位阶跃响应,并分析参量的影响。自控例题。
- mac地址前6位对应vendor
- 【系统维护篇】 之 从零开始
- python同步远程文件夹_python pyinotify 监控远程文件夹来实现即时全量同步
- 我母亲在一家计算机公司工作,写母亲的作文(精选11篇)
- 芯片史称:“长平之战”----Intel的东进与ARM的西征(3)--人生如戏,全靠演技