swiper的使用

1、在package.json的devDependencies先注册"vue-awesome-swiper": “^3.1.3”,
2、注册好之后,在需要用到swiper的页面,引入swiper

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import showDiv, { closeAll } from '@ivy/fts/showDiv'
@Component({
  components: {
    swiper,
    swiperSlide,
  },
})

3、引入完毕后,直接使用即可

<swiper :options="swiperOption">
        <swiper-slide v-for="(item, index) in bannerList"
                      :key="index">
          <img :src="item"
               class="banner-img"
               alt="" />
        </swiper-slide>
        <div slot="pagination"
             class="swiper-pagination"></div>
      </swiper>

下面就是你的图片资源,我这里直接用本地图片了,你们自己用你们自己的就好

bannerList: any = [
    require('../../assets/introduce/bg.png'),
    require('../../assets/introduce/bg.png'),
  ]

再往下是相关轮播图的配置

swiperOption: any = {
    effect: 'coverflow', // 3d滑动
    slidesPerView: 1,
    centeredSlides: true,
    coverflowEffect: {
      rotate: 0,
      stretch: 40,
      depth: 50,
      modifier: 2,
      slideShadows: false
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
  }

我这个就是带有分页器的然后右边稍微漏出来的不循环的一个轮播图

祝大家发财~