vue项目中 使用swiper插件 实现 3D横向焦点图效果

      纵享丝滑 做回自己
      版本下载  "swiper": "^5.4.5",
              "vue-awesome-swiper": "^3.1.3",   
              {不然嘎嘎错}
      文件中 
      // 引入插件
        import "swiper/css/swiper.css";
        import Swiper from "swiper";

效果展示

接下来直接cv即可

<div class="box">
<div class="swiper" id="certify" v-if="countryitems.length > 0">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(item,index) in countryitems"
        :key="index">
        <img :src="item.listImage" />
      </div>
    </div>
  </div>
</div>

继续cv

// 引入插件
import "swiper/css/swiper.css";
import Swiper from "swiper";

export default {
  mounted () {
    this.swiper = new Swiper(".swiper-container", {
      autoplay: true, //是否自动播放 true 是  false 否
      slidesPerView: 1, //一排展示几个
      initialSlide: 1, //进来时候展示第几个
      effect: "coverflow", //轮播图的切换效果  coverflow 3D
      centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
      spaceBetween: "-54%", //每个轮播图之间设置距离（单位px）。
      // loop: true, // 是否循环播放
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      coverflowEffect: {
        rotate: 0, //slide做3d旋转时Y轴的旋转角度
        stretch: 10, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
        depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小。
        modifier: 5, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显
        slideShadows: false, //是否开启slide阴影
      },
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: false, //修改swiper的父元素时，自动初始化swiper
      onSlideChangeEnd: function (swiper) {
        swiper.update();
        mySwiper.startAutoplay();
        mySwiper.reLoop();
      },
    });
  },
  data() {
    return {
      swiper:null,
      countryitems:[
        {listImage:"https://img0.baidu.com/it/u=2900833435,993445529&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"},
        {listImage:"https://img0.baidu.com/it/u=2900833435,993445529&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"},
        {listImage:"https://img0.baidu.com/it/u=2900833435,993445529&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"},
        {listImage:"https://img0.baidu.com/it/u=2900833435,993445529&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"},
        {listImage:"https://img0.baidu.com/it/u=2900833435,993445529&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"}
      ]
    }
  },
};

最后一步cv结束

   .swiperss {
      height: 355px;
      width: 100%;
      margin: 50px auto;
      border: 1px solid green;
    }
    .box {
      margin: 0 auto ;
      height: 340px;
      width: 1200px;
      .swiper {
        margin: 20px;
        height: 340px;
        img {
          width: 600px;
          height: 340px;
        }
      }
      .swiper-container {
        width: 100%;
        height: 340px;
      }
      .bird {
        margin-top: 20px;
      }
    }