Swiper 8.3.0 视差切换效果

2022-10-23

更新了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);