js使用swiper实现层叠轮播效果实例代码


Posted in Javascript onDecember 12, 2018

前言

swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了,下面就来开始本文的正文内容

实现过程:

一.移动端-需求swiper 4.0.3实现层叠轮播

二.实现效果如下

js使用swiper实现层叠轮播效果实例代码

三.方案:查找了下发现使用swiper的切换效果coverflowEffect可以实现

1.coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式

2.coverflow的属性:

rotate:slide做3d旋转时Y轴的旋转角度。默认50。

stretch:每个slide之间的拉伸值,越大slide靠得越紧。 默认0。

depth:slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。

modifier:depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。

slideShadows:开启slide阴影。默认 true。

四.代码:

this.swiper = new Swiper('.case-swiper-container', {
    centeredSlides: false, // 选中slide居中显示
    initialSlide: 1, // 默认选中项索引
    slidesPerView: 1, // 自动匹配每次显示的slide个数,loop='auto'模式下,还需要设置loopedSlides
    effect: 'coverflow', // 切换效果-3d
    coverflowEffect: {
     rotate: 0,
     stretch: 10,
     depth: 160,
     modifier: 2,
     slideShadows: true
    },
    pagination: {
     el: '.swiper-pagination'
    },
    on: {
     init() {
      const item = JSON.parse($($(this.$el[0]).find('.swiper-slide')[this.activeIndex]).attr('data-item'));
      _this.updateCaseInfo(item);
     },
     slideChange() { // 轮播slide同时更新文字描述
      const item = JSON.parse($($(this.$el[0]).find('.swiper-slide')[this.activeIndex]).attr('data-item'));
      _this.updateCaseInfo(item);
     }
    }
   });

5.注意:

5.1若期望选中slide居中显示,则设置centerSlides:true,若期望在默认显示轮播时去掉左边空白,可设置initialSlide:1

5.2不要试图控制默认选中项的宽高,会影响正常的轮播效果,只能通过调整coverflow的相关属性和swiper容器的宽高达到最终的效果

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
js获取ajax返回值代码
Apr 30 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
js Calender控件使用详解
Jan 05 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 #Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 #Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 #Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 #Javascript
express express-session的使用小结
Dec 12 #Javascript
解决vue移动端适配问题
Dec 12 #Javascript
js中位运算的运用实例分析
Dec 11 #Javascript
You might like
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
golang与PHP输出excel示例
2016/07/22 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
jQuery实现跨域
2015/02/03 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
Python中IPYTHON入门实例
2015/05/11 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python 求10个数的平均数实例
2019/12/16 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
python3.7调试的实例方法
2020/07/21 Python
简单而又朴实的个人求职信分享
2013/12/12 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
中学家长会邀请函
2014/01/17 职场文书
护士找工作求职信
2014/07/02 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
小学推普周活动总结
2015/05/07 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
Python3接口性能测试实例代码
2021/06/20 Python