vue 注册全局swiper_Vue使用vue-awesome-swiper构建首页轮播

npm install vue-awesome-swiper@2.6.7 --save

全局引人

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

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

创建Swiper组件

export default {

name: 'HomeSwiper',

data() {

return {

swiperOption:{

pagination: '.swiper-pagination', //配置小圆点

loop: true //无线轮播

},

swiperList: [{

id: '0001',

imgUrl: ""

},{

id: '0002',

imgUrl: ""

},{

id: '0003',

imgUrl: ""

}]

}

}

}

.wrapper >>> .swiper-pagination-bullet-active //css属性穿透

background: #fff

.wrapper

width: 100%

height: 0

overflow: hidden

padding-bottom: 27.25% //固定图片容器的长宽比

background: #eee

.swiper-img

width :100%