vue-awesome-swiper实现3d轮播图

写了好几个有关vue的移动端的项目，好多轮播样式都是3d的，所以现在记录一下，以便下次可以直接使用

安装

npm install vue-awesome-swiper --save

在main.js中引用

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

页面中使用

<templete>
           <div class="banner">
                <div class="swiper-wrapper">
                    <swiper :options="swiperOption" ref="mySwiper">
                        <swiper-slide v-for="(item,i) in 3" :key="i">
                                <div class="cover">
                                    <img src="http://yopoo.oss-cn-beijing.aliyuncs.com/bg-news.jpg">
                                    <p class="title">这是标题</p>
                                </div>
                        </swiper-slide>
                        <div class="swiper-pagination"  slot="pagination"></div> //这是分页器
                    </swiper>
                </div>
            </div>
</templete>
<script>
    require('swiper/dist/css/swiper.css');
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        components: {
            swiper,
            swiperSlide
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        data(){
            return{
                swiperOption: {
                    loop:true,
                    speed:500,   //切换速度
                    mousewheelControl: false,// 禁止鼠标滚轮切换
                    initialSlide :1,
                    lazy: {
                        loadPrevNext: true,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    autoplay: {
                        delay:2000,
                        stopOnLastSlide: false, // 切换到最后一个时不停止
                        disableOnInteraction: false, //用户操作swiper之后 不停止autoplay
                    },
                    watchSlidesProgress:true,
                    centeredSlides: true, //设定为true时，活动块会居中，而不是默认状态下的居左。
                    spaceBetween:20,
                    slidesPerView: 1.1,
                    loopedSlides :2,
                    observer: true,
                    observeParents: true
                },
                banner:[]
            }
        },
    }
</script>
<style lang="less" rel="stylesheet/less">
      .banner{
            height: 3.7rem;
            .swiper-slide{
                height: 3.4rem;
                .cover{
                    position: relative;
                    height: 3.4rem;
                    .title{
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        background: rgba(0,0,0,.5);
                        color: #fff;
                        font-size: .3rem;
                        height: .48rem;
                        line-height: .48rem;
                        padding-left: .2rem;
                        width: 100%;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .swiper-pagination{ //设置分页器的大小
                bottom:-30px !important;
                .swiper-pagination-bullet{
                    width: .12rem;
                    height: .12rem;
                }
                .swiper-pagination-bullet-active{
                    background: #666;
                }
            }
        }
</style>

附上效果图

有什么问题可以随时指出 哈哈