vue3 + ts + swiper7 实现炫酷切换效果

效果预览 

 

<template>
  <div class="container">
    <swiper
      :watchSlidesProgress="true"
      :resistanceRatio="0"
      @swiper="onSwiper"
      @resize="onResize"
      @setTranslate="onSetTranslate"
      @setTransition="onSetTransition"
    >
      <swiper-slide>
        <div>
          <img class="swiper-item" src="@/assets/banner/mayi/pg2.png" alt="" />
        </div>
      </swiper-slide>
      <swiper-slide>
        <div>
          <img class="swiper-item" src="@/assets/banner/mayi/pg3.png" alt="" />
        </div>
      </swiper-slide>
      <swiper-slide>
        <div>
          <img class="swiper-item" src="@/assets/banner/mayi/pg1.png" alt="" />
        </div>
      </swiper-slide>
      <swiper-slide>
        <div>
          <img class="swiper-item" src="@/assets/banner/mayi/pg4.png" alt="" />
        </div>
      </swiper-slide>
      <swiper-slide>
        <div>
          <img class="swiper-item" src="@/assets/banner/mayi/pg2.png" alt="" />
        </div>
      </swiper-slide>
      <swiper-slide>
        <div>
          <img class="swiper-item" src="@/assets/banner/mayi/pg3.png" alt="" />
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script lang="ts">
import { Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
import "swiper/swiper-bundle.min.css";

import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  title: "swipersss",
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper: any) => {
      let slides = swiper.slides;
      for (let i = 0; i < slides.length; i++) {
        let slide = slides.eq(i);
        slide.css("zIndex", 100 - i); //设置slide的z-index层级
      }
    };

    const onResize = (swiper: any) => {
      swiper.update();
    };

    const onSetTranslate = (swiper: any, translate: any) => {
      let slides = swiper.slides;
      let offsetAfter = swiper.width * 0.95; //每个slide的位移值
      for (let i = 0; i < slides.length; i++) {
        let slide = slides.eq(i);
        let progress = slides[i].progress;

        if (progress <= 0) {
          //右边slide位移
          slide.transform(
            "translate3d(" +
              progress * offsetAfter +
              "px, 0, 0) scale(" +
              (1 - Math.abs(progress) / 20) +
              ")"
          );
          slide.css("opacity", progress + 3); //最右边slide透明
        }

        if (progress > 0) {
          slide.transform("rotate(" + -progress * 5 + "deg)"); //左边slide旋转
          slide.css("opacity", 1 - progress); //左边slide透明
        }
      }
    };

    const onSetTransition = (swiper: any, transition: any) => {
      for (var i = 0; i < swiper.slides.length; i++) {
        var slide = swiper.slides.eq(i);
        slide.transition(transition);
      }
    };
    return {
      modules: [Pagination],
      onSwiper,
      onResize,
      onSetTranslate,
      onSetTransition,
    };
  },
});
</script>
<style scoped lang="scss">
.container {
  width: 500px;
  margin: auto;
}
.swiper::v-deep {
  width: 100%;
}
.swiper-slide {
  text-align: center;
}
.swiper-slide div {
  width: 86%;
  border-radius: 7px;
  margin: 10px 0 10px 4%;
}
.swiper-slide div img {
  width: 100%;
  display: block;
  border-radius: 7px;
}
</style>

 

 扫描二维码预览效果

 

<template>
  <div class="container">
    <swiper
      :modules="modules"
      :spaceBetween="30"
      :slidesPerView="2"
      :pagination="true"
      :loopedSlides="5"
      :centeredSlides="true"
    >
      <swiper-slide>
        <img
          class="swiper-item"
          src="https://common.ofo.so/campaign/valentine/images/ditie4.png"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          class="swiper-item"
          src="https://common.ofo.so/campaign/valentine/images/ditie3.png"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          class="swiper-item"
          src="https://common.ofo.so/campaign/valentine/images/ditie2.png"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          class="swiper-item"
          src="https://common.ofo.so/campaign/valentine/images/ditie1.png"
          alt=""
        />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script lang="ts">
// import Swiper core and required modules
import { Pagination } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

// Import Swiper styles
// import "swiper/swiper.min.css";
// import "swiper/modules/navigation/navigation.min.css";
// import "swiper/modules/pagination/pagination.min.css";
// import "swiper/modules/scrollbar/scrollbar.min.css";

/**
 * 如果嫌麻烦可以把上面的全部样式都删了，直接用总的
 * bundle：所有 Swiper 样式，包括所有模块样式（如导航、分页等）
 */
import "swiper/swiper-bundle.min.css";

import { defineComponent, onMounted } from "vue";

export default defineComponent({
  title: "swipersss",
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const pagination = { el: ".swiper-pagination", clickable: true };
    const onSwiper = (swiper: any) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Pagination],
      // pagination,
    };
  },
});
</script>
<style scoped lang="scss">
.container {
  width: 500px;
  margin: auto;
}
.swiper::v-deep {
  width: 100%;
  height: 250px;
  padding-top: 20px;
  margin-top: 20px;
}
.swiper-slide::v-deep {
  position: relative;
  top: 0;
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 60%;
  height: 100%;
}
.swiper-slide.swiper-slide-active::v-deep {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  z-index: 1000;
}
.swiper-slide.swiper-slide-prev,
.swiper-slide.swiper-slide-next {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.swiper-item {
  width: 290px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>