vue 快速使用轮播

vue 快速使用轮播

1.npm i vue-awesome-swiper -S安装

2.组件

 <swiper v-if="baseList.length > 3" :options="swiperOption1" class="swiper-wrap" :key="typeindex">
            <swiper-slide v-for="(item, index) in baseList" :key="index" class="list-item">
                <div class="imgCont">
                    <div class="headImg">
                        <div class="imgH">
                            <img :src="`${fileDomain}${item.zp}`" alt="">
                        </div>
                        <div class="name" :title="item.xm">{{item.xm}}</div>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
        <div class="btn-right"></div> //自定义切换按钮 与配置名一样
        <div class="btn-left"></div>

3.配置

swiperOption1: {
                effect: 'coverflow',
                autoplay: {
                    disableOnInteraction: false, // 鼠标滑动后继续自动播放
                    delay: 3000, // 2秒切换一次
                },
                loop: true,
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper 
                grabCursor: true,
                navigation: {
                    nextEl: '.btn-left',//自动隐藏
                    prevEl: '.btn-right',//自动隐藏
                },
                centeredSlides: true,
                slidesPerView: 'auto',
                coverflowEffect: {
                    rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
                    stretch: 235, //每个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0。
                    depth: 270, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
                    modifier: 1, //depth和rotate和stretch的倍率，相当于            depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
                    slideShadows: false //开启slide阴影。默认 true。
                },

            },

4.组件引入

  components: {
        swiper,
        swiperSlide
    },

最主要一点就是 在配置里面的按钮名必须与组件元素名保持一致，可以自定义样式