swiper异形切换(可视化)

swiper 版本 Swiper4.x

自己用到这个组件，数值老是调不理想做了个简单demo,方便以后调用，需要用到的试试吧

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="https://www.swiper.com.cn/dist/css/swiper.min.css"><title>Document</title><script src="https://www.swiper.com.cn/dist/js/swiper.min.js"></script><style>*{moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}.btn {display: flex;justify-content: space-between;padding: 40px;}</style>
</head>
<body><div class="box"><div class="swiper-container" style="height:300px"><div class="swiper-wrapper"><div class="swiper-slide" style="background-color:cadetblue">Slide 1</div><div class="swiper-slide" style="background-color:chartreuse">Slide 2</div><div class="swiper-slide" style="background-color:darkblue">Slide 3</div></div></div><div class="btn"></div></div>
</body>
</html>
<script>function _swiper(rotate,stretch,depth,modifier) {var mySwiper2 = new Swiper('.swiper-container', {initialSlide :1,autoplay: false,loop: false,//开启循环slidesPerView: 2,//设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。effect:'coverflow',//可以实现3D效果的轮播,centeredSlides:true,//设定为true时，activeslide会居中，而不是默认状态下的居左。coverflowEffect: {rotate,//slide做3d旋转时Y轴的旋转角度。默认50。stretch,//每个slide之间的拉伸值，越大slide靠得越紧。 depth,//slide的位置深度。值越大z轴距离越远，看起来越小。 modifier,//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。slideShadows : true//开启slide阴影。默认 true。}});}var rotate=0,stretch=0,depth=0,modifier=0;var abab = document.querySelector('.btn');abab.innerHTML = `<div><p>rotate:</p><button class="rotateja">+</button><span class="rotate">0</span><button class="rotatejj">-</button></div><div><p>stretch:</p><button class="stretchja">+</button><span class="stretch">-18</span><button class="stretchjj">-</button></div><div><p>depth:</p><button class="depthja">+</button><span class="depth">85</span><button class="depthjj">-</button></div><div><p>modifier:</p><button class="modifierja">+</button><span class="modifier">5</span><button class="modifierjj">-</button></div>`var aryss = ['rotate','stretch','depth','modifier'];var rotate=0,stretch=-18,depth=85,modifier=5;_swiper(rotate,stretch,depth,modifier)aryss.forEach(function(el){abab.querySelector(`.${el}ja`).onclick = function(){var val =  Number(abab.querySelector(`.${el}`).innerText);val++;abab.querySelector(`.${el}`).innerText = val;switch (el) {case 'rotate':rotate = val;break;case 'stretch':stretch = val;break;case 'depth':depth = val;breakdefault:modifier = val;break;}_swiper(rotate,stretch,depth,modifier)}abab.querySelector(`.${el}jj`).onclick = function(){var val =  Number(abab.querySelector(`.${el}`).innerText);val--;abab.querySelector(`.${el}`).innerText = val;switch (el) {case 'rotate':rotate = val;break;case 'stretch':stretch = val;break;case 'depth':depth = val;breakdefault:modifier = val;break;}_swiper(rotate,stretch,depth,modifier)}})
</script>

swiper异形切换(可视化)相关推荐

swiper vue 切换到指定_vue+swiper实现背景跟随轮播图切换
一. 图片变量设置 1.Less: @imgurl: "../images/"; .container { width: 100%; height: 100%; backgroun ...
swiper异形轮播
 <link rel="stylesheet" href="../dist/css/swiper.min.css&q ...
小程序swiper带切换按钮
小程序自带swiper组件, display-multiple-items 同时显示的滑块数量 current: 当前所在滑块的 index duration:切换需要花的时间一般为1秒 bindc ...
移动端插件-Swiper图片切换、轮播
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏轮播图切换等常用效 ...
swiper vue 切换到指定_vue与swiper结合，如何让页面跳出来
问题描述我最近在做一个自己的博客,想要利用swiper实现tab卡可以左右滑动切换,但是当我在点击一个内容的区域时,理应跳到相对应的文章详情页面,可是详情页面的组件始终出不来. 问题出现的环境背景及 ...
H5页面初次加载swiper导航切换按钮可以点击，刷新后就失效不可点击问题@令狐张豪
原因:加载顺序的问题,数据还没有完全加载的时候就已经渲染swiper了解决方案:(在swiper加上这两行代码) observer:true,//修改swiper自己或子元素时,自动初始化swipe ...
swiper左右切换按钮无效_BMD为ATEM切换台发布新的2 M/E和4M/E控制面板
北京 - 2020年7月10日 - Blackmagic Design今天发布两款全新的切换台硬件控制面板ATEM 2 M/E Advanced Panel和ATEM 4 M/E Advanced P ...
swiper 导航切换按钮点击出现边框线，元素点击出现边框线@令狐张豪
.swiper-button-prev,.swiper-button-next:focus {outline: none;} end~~~ 如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚, ...
Swiper学习之三---swiper的配置选项 ②：Free模式和Effects切换效果
大家好,好长时间没继续更新Swiper的博文了,小伙伴的swiper学习怎么样了呢,萍子要继续学习swiper的有关知识了,哈哈哈,要不要一起啊. 之前已经更过两篇关于Swiper的博文了,关于Swi ...

swiper异形切换(可视化)

swiper异形切换(可视化)相关推荐

最新文章

热门文章