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效果的漂亮横向多列响应式滚动效果的话,那么你可以考虑使 ...
最新文章
- Multi-Temporal SAR Data Large-Scale Crop Mapping Based on U-Net Model(利用U-net对多时相SAR影像获得作物图)...
- Any problem in computer science can be solved with another layer of indirection
- java漂亮界面编程_计算机二级之JAVA篇
- java phantomjs 截图_phantomjs 截图
- 第一模块:开发基础 第1章·Python基础语法
- 被阿里带火的数据中台,不靠这三个阶段绝对失败
- 开发宝典:基于分布式对象的网游程序结构设计
- 怎么查看ingress的规则_Prometheus PormQL语法及告警规则写法
- sharepoint文件夹本地同步_FreeFileSync for Mac(文件夹同步和比较工具)
- db2 中sql 拼接字符串
- Office 365系列之十三:Office 365管理员角色
- 汽车试验数据管理(TDM系统)的特点分析及解决方案
- 用户态协议栈之tcp/ip设计
- 昆仑通态人机界面与单片机通信实战教程四:单片机程序的设计
- 每天不知道吃什么,于是我做了个随机选择的小程序
- Hotspot细节实现安全区域、记忆集卡表
- 无线网卡改打印服务器,怎样将喷墨打印机改装成无线连接
- 用Python打造属于你的贾维斯
- xcode 调用opencv 摄像头权限问题
- Flutter开发学习课程携程app开发(二)
热门文章
- Hyperledger Fabric权限进阶篇
- 魅族C++协程框架(Kiev)技术内幕
- Linux和unix中 awk 的print浅谈
- 数据库MySQL关系模型之基本概念
- Expected BEGIN_OBJECT but was BEGIN_ARRARY at line 1 column 2 path$异常解决方法
- cocoa mysql_基本MySQL查询
- php 回调通知 连连支付_php怎么写连连支付退款
- tensor torch 构造_详解Pytorch中的网络构造
- linux打包文件命令行,Linux 命令行 | 打包和解包命令
- 总结整理Matlab的plot函数用法