Use vue-awesome-swiper to write the carousel map, first npm install
npm install vue-awesome-swiper --save
After installation, add some code in the entry file main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
In the component that needs to use the carousel
<template>
<div>
<swiper :options="swiperOption">
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" alt="">
</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
},
swiperList:[{
id:'0001',
imgUrl:'http://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg'
},{
id:'0002',
imgUrl:'http://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg'
}]
}
}
}
</script>
<style lang="stylus" scoped>
.swiper-img{
width: 100%;
}
.wrapper >>> .swiper-pagination-bullet-active{
background:#fff !important
}
.wrapper{
overflow :hidden
width:100%
height:0
padding-bottom :31.25%
}
</style>
But after writing and running, I found that the picture is displayed vertically.
Solution, if the version you installed is above 2.6.0, you need to manually load the css file. The version I installed here is 2.6.7.
Add a line of
import 'swiper to the main.js file /dist/css/swiper.css'
so that the pictures will be arranged horizontally.
Also, if the pictures are not displayed when using this plug-in, find the vue-awesome-swiper package in node-modules, delete it, and install it again on npm on the line