vue中添加swiper

vue中添加swiper

//引入包
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
//样式
require('swiper/dist/css/swiper.css')
Vue.use(VueAwesomeSwiper)
//此代码在main.js中引入
//然后在需要的地方执行下边代码 在template中执行
<swiper :options="swiperOption">
        <swiper-slide
          v-for="(items,index) in bannerphoto"
          :key="index"
        >
          <img
            :src="items"
            alt=""
          >
        </swiper-slide>
        <div
          class="swiper-pagination"
          slot="pagination"
        ></div>
      </swiper>

//在data中执行
bannerphoto: [
        'https://i1.mifile.cn/a4/xmad_15471333544761_iIFgE.jpg',
        'https://i1.mifile.cn/a4/xmad_15475244446497_pOHxm.jpg'
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        paginationClickable: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: true,
        loop: true,
        coverflow: {
          rotate: 30,
          stretch: 10,
          depth: 60,
          modifier: 2,
          slideShadows: true
        }
      }