1.在命令行里面输入
npm install vue-awesome-swiper@2.6.7 --save
2.在main.js文件里面写入一下代码
import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
3.在组件中应用vue-awesome-swiper插件
3.1.template标签内的内容
<div class="swiper_wrap"> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="item in swiperarr" :key="item.id"> <img class="img_tab" :src="item.url" alt=""> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div>
3.2.script标签内容
export default { name:'HomeSwiper', data () { return { swiperOptions: { // 分页器设置 pagination: '.swiper-pagination', // 环状轮播 loop: true }, swiperarr:[ {url:'https://imgs.qunarzz.com/vs_ceph_vcimg/79faa5a73731e84a7731db49d5baa91e.jpeg',id:'0'}, {url:'https://imgs.qunarzz.com/vs_ceph_vcimg/c0a60fa20379efa4f02ce527a680dc1b.jpeg',id:'1'}, ] }; } }
3.3.css部分代码
<style lang='stylus' scoped> .swiper_wrap >>> .swiper-pagination-bullet-active background: #fff .swiper_wrap width: 100% height: 32.5vw .img_tab width: 100% </style>