下载：
npm install swiper  --save-dev
网址：
swiper4.0使用入口：http://www.swiper.com.cn/usage/index.html
<template><div class="MoveImg"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="../assets/img/1.jpeg" alt=""style="width: 100%"></div><div class="swiper-slide"><img src="../assets/img/2.jpg" alt="" style="width: 100%"></div><div class="swiper-slide"><img src="../assets/img/3.jpg" alt="" style="width: 100%"></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><div class="swiper-scrollbar"></div></div></div>
</template><script>import Swiper from 'swiper';export default {name: 'slide',data () {return {msg: 'Welcome to Your Vue.js App'}},mounted(){new Swiper ('.swiper-container', {loop: true,autoplay: {delay: 2000,//1秒切换一次},// 如果需要分页器pagination: '.swiper-pagination',// 如果需要前进后退按钮nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',// 如果需要滚动条scrollbar: '.swiper-scrollbar',})}}
</script><style scoped>@import'swiper/dist/css/swiper.min.css';
.MoveImg{width: 100%;height: 300px;background: #ac0;margin-bottom: 20px;
}
.swiper-container {width:500px;height:100%;margin: 20px auto;
}
</style>