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;
break
default:
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;
break
default:
modifier = val;
break;
}
_swiper(rotate,stretch,depth,modifier)
}
})
</script>