<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper的3D切换</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/certify.css">
<script src="js/swiper.min.js"></script>
</head>
<body>
<div id="certify">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/certify01.png" />
<p>非常难得又值钱的认证证书</p>
</div>
<div class="swiper-slide"><img src="images/certify02.png" />
<p>深圳市优秀互联网企业认定证书</p>
</div>
<div class="swiper-slide"><img src="images/certify03.png" />
<p>质量管理体系认证荣誉证书</p>
</div>
<div class="swiper-slide"><img src="images/certify04.png" />
<p>计算机软件著作权登记证书</p>
</div>
<div class="swiper-slide"><img src="images/certify05.png" />
<p>增值电信业务经营许可证</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
certifySwiper = new Swiper('#certify .swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 5,
autoplay: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
//clickable :true,
},
on: {
progress: function(progress) {
//通过循环给每个元素添加相对应的style样式。
//slide 当前slide
//slideProgress:图片所对应的索引
//modify: 起始值
//translate 轮播图平移的水平距离
//scale 两边图片缩放的比例
//zIndex 两边图片的层级关系
for (i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
console.log(slideProgress)
var modify = 1;
//这里的260指的是两个元素之间平移的距离
var translate = slideProgress * modify * 260 + 'px';
var scale = 1 - Math.abs(slideProgress) / 5;
var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
//设置轮播图单图的样式
slide.transform('translateX(' + translate + ') scale(' + scale + ')');
slide.css('zIndex', zIndex);
slide.css('opacity', 1);
//隐藏多余的轮播图. 1就是两边只剩一个,加上中间一个,就是三个。
// 2就是两边只剩两个,加上中间一个,就是五个。
if (Math.abs(slideProgress) > 3) {
slide.css('opacity', 0);
}
}
},
//轮播图滚动的动画效果
setTransition: function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
}
})
</script>
</body>
</html>
使用swiper5进行3d轮播图,轮播切换.
于 2020-09-15 22:18:43 首次发布