一、集成swiper
npm install swiper
二、main.js中引入公共样式
import 'swiper/dist/css/swiper.min.css'
三、页面中调用,在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里(若想要从后台请求图片放上去 new Swiper要写在网络请求成功的回调函数,否则无法出来数据。)
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/logo.png" alt="">
</div>
<div class="swiper-slide">
<img src="../assets/logo.png" alt="">
</div>
<div class="swiper-slide">
<img src="../assets/logo.png" alt="">
</div>
</div>
</div>
</template>
<script>
import Swiper from 'swiper';
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted:function(){
var mySwiper = new Swiper('.swiper-container', {
autoplay:true,
loop:true
})
},
}
</script>