1.安装vue-awesome-swiper2.6.7插件
cnpm install vue-awesome-swiper@2.6.7 --save
2.在main.js中引入
main.js
// 引入轮播插件:vue-awesome-swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
3.Swipper.vue模板
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: "HomeSwiper",
data() {
return {
swiperOption: {
//配置项:出现轮播图下面的滑动点
pagination: '.swiper-pagination',
// 循环播放
loop: true,
// 自动轮播,单位ms
autoplay: 5000
},
// 轮播图数据源
swiperList: [
{
id: '0001',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/dc11f0bb94057224b104a2017f313e21.jpg_750x200_feee379d.jpg'
},
{
id: '0002',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/64beebd2f4e2447db0891e8b890b5a07.png_750x200_ab33275f.png'
}
]
};
}
};
</script>
<style lang="stylus" scoped>
//改变轮播图滑动点的颜色
// 这样写的原因:我们这里加了scoped,只在本域中生效,但是滑动点的颜色是由
// <swiper> 元素控件的,swiper-pagination类只是起到个设置作用,最终还是
//要传递给<swiper> 元素,所以我们需要如下写法,来穿透 scoped 限制域,使设置生效
.wrapper >>> .swiper-pagination-bullet-active
background #fff
// wrapper:确保宽高比为 31.25%,主要用来解决当网速不行时,依然保证轮播图
//已占据控件,DOM元素不会发生抖动现象
.wrapper
overflow hidden
width 100%
height 0
padding-bottom 26.67%
background #eee
.swiper-img
width 100%
</style>