swiper版本

首先第一个问题就是版本的问题，反正菜鸟之前使用 swiper6.1.2 是不行的，后来掘金上找到了答案，那就是 swiper6 不接收 3d 参数！

菜鸟本项目用的是 4.3.0 版本的 swiper ！

文章地址：https://juejin.cn/post/6878189008917266439#comment

swiper配置

菜鸟一开始的配置

new Swiper(".swiper-container", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  loop: true,
  initialSlide: 0,
  slidesPerView: 3,
  coverflowEffect: { // 可以直接看swiper官网，属性都有介绍
    rotate: 50,  // 旋转角度
    stretch: -60, // 间距
    depth: 200, // 深度，越大越远、越小
    modifier: 1,
    slideShadows: false // 是否开启阴影
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  on: {
    click: (event) => {
      // console.log(event);
      // event.target 为dom元素，可以按需求取它的class或者其他属性
      // 我的是img所以我取的src属性
      const text = event.target.innerText;
      // console.log(text);
      switch (text) {
        case "拼图游戏": this.showdialogFun(0); break;
        case "识币小游戏": this.showdialogFun(1); break;
        case "答题互动": this.showdialogFun(2); break;
      }
    }
  }
});

但是这样就会有一个bug，就是向左的循环在点击到某一个的时候会差一个，但是继续点击确实是循环的！

在对比官网的代码后，发现就是这个 slidesPerView: 3 搞的鬼，应该改为 slidesPerView: “auto” ，但是这样就要用样式去决定展示几个了！

这里菜鸟因为用到了js自适应缩放，所以这里要记录一下，js自适应缩放会影响这个3d展示，反而使其不能自适应了！

这里的 on 里面的 click 方法是用来取代 swiper-slide 上绑定的事件的，因为循环之后，swiper帮你复制的元素是没有你绑定的事件的！