vue 3d 轮播图

效果图：

实现效果

1、安装

       npm install swiper vue-awesome-swiper --save

2、main.js引用

        引用插件

        import VueAwesomeSwiper from 'vue-awesome-swiper';

        Vue.use(VueAwesomeSwiper);

        引用样式

        // import style (<= Swiper 5.x) ，此处引用的是swiper 5版本的样式

        import 'swiper/css/swiper.css'

3、代码如下：

代码

        

              

                

                  

               

              

             

        

script：

        data() {

            return {

              banners: [ require("./../assets/img12.png"), require("./../assets/img13.jpg"), require("./../assets/img4.jpeg") ],

              swiperOption: {

                effect: 'coverflow',

                speed:300,  // 轮播时长300ms

                autoplay : {  // 自动轮播

                  delay:3000

                },

                loop: true, // 环形，不停循环

                grabCursor: true,

                centeredSlides: true,

                slidesPerView: '2',

                coverflowEffect: { // 覆盖流样式

                  rotate: -50,

                  stretch: 50, // 拉伸值，值越大间隔越近

                  depth: 200, //位置深度，值越大图越小

                  modifier: 1,

                  slideShadows : true,

                },

                pagination: {

                  el: '.swiper-pagination'

                },

              }

            }

          },

样式style：

.swiper-div {

  width: 50%;

}

.swiper-wrapper {

  width: 100%;

  height: auto;

  padding-top: 50px;

  padding-bottom: 50px;

}

.swiper-slide {

  background-position: center;

  background-size: cover;

  width: 400px;

  height: 300px;

}

.swiper-slide > img {

  width: 100%;

  height: 100%;

}

api地址：https://www.swiper.com.cn/api/