swiper 層疊輪播圖 vue3版

<template>
  <div style="width: 696px; height: 800px; position: relative">
    <swiper
      :slides-per-view="2.5"
      :loop="true"
      :watch-slides-progress="true"
      :centered-slides="true"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }"
      :modules="modules"
      class="mySwiper"
      style="width: 696px; height: 800px"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      @progress="progressFn"
      @setTransition="setTransition"
    >
      <swiper-slide
        v-for="item in 6"
        :key="item"
      >
        <div class="max-box">
<!--          <img src="@/assets/images/echarts/2.png">-->
          <div class="bottom-box">
            <div class="opacity" />
            <h6 class="title">
              我好累，我要富婆抱着睡{{ item }}
            </h6>
            <p>上班：是不可能上班的</p>
            <p>反正也賺不到錢米</p>
            <div class="check-detail">
              查看詳情<span />
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <div class="swiper-button-prev" />
    <div class="swiper-button-next" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue'
import { Navigation } from 'swiper/swiper.esm'
import 'swiper/swiper.less'
import 'swiper/modules/effect-fade/effect-fade.less'

const modules = ref([Navigation])

const onSwiper = (swiper) => {
  console.log(swiper)
}
const onSlideChange = () => {
  console.log('slide change')
}
const progressFn = function (swiper, progress) {
  const { slides } = swiper
  for (let i = 0; i < slides.length; i++) {
    const slide = slides.eq(i)
    const slideProgress = slides[i].progress
    let modify = 1
    if (Math.abs(slideProgress) > 1) {
      modify = (Math.abs(slideProgress) - 1) * 0.56 + 1
    }
    const translate = slideProgress * modify * 220 + 'px'
    const scale = 1 - Math.abs(slideProgress) / 5
    const zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
    slide.transform('translateX(' + translate + ') scale(' + scale + ')')
    slide.css('zIndex', zIndex)
    slide.css('opacity', 1)
    if (Math.abs(slideProgress) > 3) {
      slide.css('opacity', 0)
    }
  }
}

const setTransition = function (swiper, transition) {
  for (let i = 0; i < swiper.slides.length; i++) {
    const slide = swiper.slides.eq(i)
    slide.transition(transition)
  }
}
</script>

<style lang="less">
@color: #3DF9FF;
.swiper-slide {
  z-index: 65;
}

.swiper-slide-prev,
swiper-slide-next {
  z-index: 2;
}
.swiper-slide-active {
  z-index: 66;
  .max-box {
    height: 574px;
  }
}
.swiper-button-next {
  width: 50px;
  background-color: red;
  height: 50px;
  position: absolute;
  right: 0;
  top: 200px;
  z-index: 68;
}
.swiper-button-prev {
  width: 50px;
  background-color: blue;
  height: 50px;
  left: 0;
  top: 200px;
  position: absolute;
  z-index: 68;
}

.max-box {
  font-family: PingFangSC-Regular;
  width: 412px;
  img {
    height: 308px;
    width: 100%;
  }
  .opacity {
    position: absolute;
    top: 0;
    left: 0;
    //opacity: 0.5;
    height: 265px;
    width: 100%;
    background: #0B143D;
    border: 2px solid rgba(0,133,255,1);
    box-shadow: inset 0px 0px 42px 0px rgba(41,76,179,1);
    z-index: -1;
  }
  p {
    margin: 0;
    font-size: 20px;
    color: #FFFFFF;
    font-weight: 400;
    margin-top: 12px;
  }
  .title {
    font-family: PingFangSC-Semibold;
    font-size: 24px;
    color: @color;
    font-weight: 600;
    padding-top: 16px;
  }
  .bottom-box {
    height: 265px;
    padding-left: 24px;
    position: relative;
    z-index: 2;
    width: 100%;
    left: -70px;
  }
  .check-detail {
    position: absolute;
    bottom: 24px;
    font-size: 20px;
    color: @color;
    font-weight: 400;
    span {
      display: inline-block;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-left-color: @color;
      position: relative;
      margin-left: 12px;
      top: 4px;
    }
  }
}
</style>

 

item