更新了Swiper，版本8.3.0，实现更好看的视差切换效果。
HTML
<!-- start: interleave_swiper -->
<div class="interleave_swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="slide-inner" style="background-image:url(12.jpg)"></div></div>
<div class="swiper-slide"><div class="slide-inner" style="background-image:url(13.jpg)"></div></div>
<div class="swiper-slide"><div class="slide-inner" style="background-image:url(14.jpg)"></div></div>
<div class="swiper-slide"><div class="slide-inner" style="background-image:url(15.jpg)"></div></div>
<div class="swiper-slide"><div class="slide-inner" style="background-image:url(16.jpg)"></div></div>
<div class="swiper-slide"><div class="slide-inner" style="background-image:url(17.jpg)"></div></div>
<div class="swiper-slide"><div class="slide-inner" style="background-image:url(18.jpg)"></div></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Navigation -->
<div class="swiper-button-next"><i></i></div>
<div class="swiper-button-prev"><i></i></div>
</div>
</div>
<!-- end: interleave_swiper -->
CSS
/* interleave_swiper */
.interleave_swiper {margin:100px auto; width:800px; height:450px;}
.interleave_swiper .swiper-container {width:100%; height:100%;}
.interleave_swiper .swiper-container .swiper-slide {overflow:hidden;}
.interleave_swiper .swiper-container .slide-inner {position:absolute; width:100%; height:100%; left:0; top:0; background-size:cover; background-position:center; display:flex; justify-content:center; align-items:center; color:#fff;}
.interleave_swiper .swiper-container .swiper-button-prev,
.interleave_swiper .swiper-container .swiper-button-next {position:absolute; top:0; bottom:0; width:50px; height:30px; margin:auto; outline:none;/* 去掉蓝色边框 */ -webkit-tap-highlight-color:rgba(255,255,255,0);/*移动端取消button点击出现阴影效果*/}
.interleave_swiper .swiper-container .swiper-button-prev::after,
.interleave_swiper .swiper-container .swiper-button-next::after {display:none;}
.interleave_swiper .swiper-container .swiper-button-prev i,
.interleave_swiper .swiper-container .swiper-button-next i {display:block; position:relative; width:20px; height:1px; background:rgba(255, 255, 255, 1); transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;/* Firefox 4 */ -webkit-transition:all 0.3s ease 0s;/* Safari 和 Chrome */ -o-transition:all 0.3s ease 0s;/* Opera */}
.interleave_swiper .swiper-container .swiper-button-prev {left:40px;}
.interleave_swiper .swiper-container .swiper-button-prev i::before {content:""; position:absolute; left:-10px; top:0; bottom:-0.5px; margin:auto; width:10px; height:1px; background:#FFFFFF; transform-origin:left top; transform:rotate(-45deg); transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;}
.interleave_swiper .swiper-container .swiper-button-prev i::after {content:""; position:absolute; left:-10px; top:0; bottom:0.5px; margin:auto; width:10px; height:1px; background:#FFFFFF; transform-origin:left bottom; transform:rotate(45deg); transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;}
.interleave_swiper .swiper-container .swiper-button-next {right:40px;}
.interleave_swiper .swiper-container .swiper-button-next i::before {content:""; position:absolute; right:-10px; top:0; bottom:-0.5px; margin:auto; width:10px; height:1px; background:#FFFFFF; transform-origin:right top; transform:rotate(45deg); transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;}
.interleave_swiper .swiper-container .swiper-button-next i::after {content:""; position:absolute; right:-10px; top:0; bottom:0.5px; margin:auto; width:10px; height:1px; background:#FFFFFF; transform-origin:right bottom; transform:rotate(-45deg); transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;}
.interleave_swiper .swiper-container .swiper-button-prev:hover i,
.interleave_swiper .swiper-container .swiper-button-next:hover i {width:40px;}
.interleave_swiper .swiper-container .swiper-button-prev:hover i::before,
.interleave_swiper .swiper-container .swiper-button-prev:hover i::after {left:-15px;}
.interleave_swiper .swiper-container .swiper-button-next:hover i::before,
.interleave_swiper .swiper-container .swiper-button-next:hover i::after {right:-15px;}
.interleave_swiper .swiper-container .swiper-button-prev:hover i,
.interleave_swiper .swiper-container .swiper-button-next:hover i {}
.interleave_swiper .swiper-container .swiper-button-next.swiper-button-disabled,
.interleave_swiper .swiper-container .swiper-button-prev.swiper-button-disabled {}
.interleave_swiper .swiper-container .swiper-container-horizontal > .swiper-pagination-bullets,
.interleave_swiper .swiper-container .swiper-pagination-custom,
.interleave_swiper .swiper-container .swiper-pagination-fraction {bottom:20px; color:#FFFFFF; left:0; right:0; margin:auto; padding:0;}
.interleave_swiper .swiper-container .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {position:relative; background:#000000; width:10px; height:10px; margin:0 5px; opacity:0.1; transition:all 0.3s ease-out 0s; -moz-transition:all 0.3s ease-out 0s; -webkit-transition:all 0.3s ease-out 0s; -o-transition:all 0.3s ease-out 0s;}
.interleave_swiper .swiper-container .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active {background:#BA2A3D; opacity:1;}
JavaScript
// interleave_swiper
var interleaveOffset = 0.5; //视差比值
var swiperOptions = {
loop: true,
speed: 1000,
grabCursor: true,
watchSlidesProgress: true,
mousewheelControl: true,
keyboardControl: true,
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
on: {
progress: function(swiper) {
for (var i = 0; i < swiper.slides.length; i++) {
var slideProgress = swiper.slides[i].progress;
var innerOffset = swiper.width * interleaveOffset;
var innerTranslate = slideProgress * innerOffset;
swiper.slides[i].querySelector(".slide-inner").style.transform =
"translate3d(" + innerTranslate + "px, 0, 0)";
}
},
touchStart: function(swiper) {
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = "";
}
},
setTransition: function(swiper, speed) {
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = speed + "ms";
swiper.slides[i].querySelector(".slide-inner").style.transition =
speed + "ms";
}
}
}
};
var swiper = new Swiper(".interleave_swiper .swiper-container", swiperOptions);