Swiper 写层叠轮播图

环境版本

• Swiper 11.2.5

• Vue 3.5.13

流程

流程

1. 必须引入 EffectCoverflow 这个模块
2. 设置属性 effect = "coverflow";
3. 设置属性 coverflowEffect;

coverflowEffect 属性

rotate：

注意

旋转角度，默认 50 slide 做 3D 旋转的时候 Y 轴的旋转角度

stretch：

注意

拉伸距离，默认 0 每个 slide 之间的拉伸值，越大 slide 靠得越紧。5.3.6 后可使用%百分比

depth：

注意

深度，默认 100

slide 的位置深度。值越大 z 轴距离越远，看起来越小。

modifier

注意

修改器，默认 1

depth 和 rotate 和 stretch 的倍率，相当于 depthmodifier、rotatemodifier、stretch*modifier，值越大这三个参数的效果越明显。

slideShadows：

注意

是否开启阴影，默认 true

轮播效果

轮播代码

<template>
  <div class="summaryE">
    <div class="E_two">
      <swiper
        :slidesPerView="5"
        loop
        :autoplay="{ delay: 5000, disableOnInteraction: true }"
        :navigation="true"
        :pagination="{ clickable: true }"
        :scrollbar="{ draggable: true }"
        :space-between="0"
        :modules="modules"
        effect="coverflow"
        :coverflowEffect="{
          rotate: 0, //slide做3d旋转时Y轴的旋转角度
          stretch: 1, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
          depth: 80, //slide的位置深度。值越大z轴距离越远，看起来越小。
          modifier: 7, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显
          slideShadows: false, //是否开启slide阴影
        }"
        @mouseenter="enter"
        @mouseleave="leave"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide
          v-for="(item, index) in arrList"
          :key="index"
          class="swiperItem"
        >
          <!-- <img :src="item.img" alt="" /> -->
          <img :src="item.img" class="hzhb" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref, defineProps, toRaw, onMounted } from "vue";

const router = useRouter();

onMounted(() => {});
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/effect-coverflow"; //effect为fade时必须引入，否则可能出现只切换一次就不自动切换的情况

import {
  Autoplay,
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  EffectCoverflow,
} from "swiper/modules";

let modules = [
  Autoplay,
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  EffectCoverflow,
];

//定义swiperNew,目的获取非响应式swiper
let swiperNew = null;

//鼠标移入
const enter = () => {
  swiperNew.autoplay.stop();
};
//鼠标移出
const leave = () => {
  swiperNew.autoplay.start();
};
const onSwiper = (swiper) => {
  // console.log(swiper);

  swiperNew = toRaw(swiper); //拿到swiper对象再转换为非响应式
};
const rightClick = () => {
  swiperNew.slidePrev();
};
const leftClick = () => {
  swiperNew.slideNext();
};
const onSlideChange = () => {
  // console.log("slide change");
};

const arrList = ref([
  {
    img: "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/2024/muniheipc/munihei/qiangxiankan/01.jpg",
  },
  {
    img: "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/2024/muniheipc/munihei/qiangxiankan/02.jpg",
  },
  {
    img: "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/2024/muniheipc/munihei/qiangxiankan/03.jpg",
  },
  {
    img: "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/2024/muniheipc/munihei/qiangxiankan/04.jpg",
  },
  {
    img: "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/2024/muniheipc/munihei/qiangxiankan/05.jpg",
  },
  {
    img: "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/2024/muniheipc/munihei/qiangxiankan/01.jpg",
  },
  {
    img: "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/2024/muniheipc/munihei/qiangxiankan/02.jpg",
  },
  {
    img: "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/2024/muniheipc/munihei/qiangxiankan/03.jpg",
  },
  {
    img: "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/2024/muniheipc/munihei/qiangxiankan/04.jpg",
  },
  {
    img: "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/2024/muniheipc/munihei/qiangxiankan/05.jpg",
  },
]);
</script>

<style scoped lang="scss">
.E_two {
  width: 100%;
}
.hzhb {
  width: 100%;
  height: auto;
}
:deep(.swiper-pagination)
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: rgb(229, 127, 141);
}

:deep(.swiper-pagination-bullet) {
  //修改分页器圆点大小
  width: 30px;
  height: 30px;
  background-color: #fff;
}
</style>