h5swiper插件vue-awesome-swiper实现3D效果

1，安装插件 

  　　npm install vue-awesome-swiper

2，组件中引用

  import { swiper, swiperSlide } from "vue-awesome-swiper";

  components: {

　　swiper,

　　swiperSlide

  },

3，使用

<template>　　

 <swiper class="swiper" :options="swiperOption">

      <swiper-slide v-for="(item,index) in list" :key="index">

　　</swiper-slide>

      <!-- <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div> -->

 </swiper>

</template>

<script>

data(){

　　return{

 swiperOption: {

        loop: true,

        effect: "coverflow", //翻转效果

        centeredSlides: true,

        slidesPerView: "auto",    //设置中间的卡片居中显示

        coverflowEffect: {           // coverflow 效果调整

          rotate: 30,

          stretch: 0,

          depth: 60,

          modifier: 2,

          slideShadows: true

        }

       

        // cubeEffect: {                //cube 效果调整(将效果设为‘cube’时要记得给最外层的‘swiper’添加可视width)

        //   slideShadows: false,

        //   shadow: false,

        //   shadowOffset: 0,

        //   shadowScale:1

        // }

      }

　　}

}

</script>

 

参考：https://segmentfault.com/q/1010000014516800

　　　https://www.swiper.com.cn/api/effects/193.html