项目中难免遇到要轮播要滑动的，自己写一个又太慢，复用性也是问题，我就教你 5 分钟 搞定swiper，妈妈再也不用担心我的轮播图了，下文代码直接复制即可运行，注释里面写的清清楚楚（最常用到的）；
若是在vue中用的话
npm install swiper --save-dev
在要用到swiper的组件中 import 一下，将js初始化部分写入 vue mounted 钩子函数里即可
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css" target="_blank" rel="external nofollow" >
<style>
*{
margin: 0;
padding: 0;
}
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-slide img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img src="https://cdn-cnc.test.17zuoye.net/s17/xue/student/public/images/wechat/newDetail/appointment_success.png"alt="">
</a>
</div>
<div class="swiper-slide">
<a href="www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img src="http://static.17xueba.com/test/server/image/2018/08/20180827110106378711.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img src="http://oimageb1.youdao.com/image?id=5410126604320844202&product=picugc" alt="">
</a>
</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
dynamicBullets: true, //动态分页器
clickable: true, //分页器控制滑动
},
// 如果需要前进后退按钮
/*navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},*/
// 如果需要滚动条
/*scrollbar: {
el: '.swiper-scrollbar',
},*/
effect : 'slide',//位移切换 fade-淡入 cube-立体方块 coverflow-3D流 flip-3D翻转
// autoplay: true,//可选选项，自动滑动
autoplay : {
delay:1000 // 滑动块 slide 停留时间
},
speed : 1000, // 自动滑动速度
//grabCursor : true, // 鼠标到 slide 上变手掌
direction: 'horizontal', // 水平 vertical //垂直
loop: true, // 循环模式选项
initialSlide :0, //默认初始化显示slide块
//autoHeight : true, //高度随 slide 变化
//runCallbacksOnInit : false,//初始化时不触发slideChange
on:{
slideChangeTransitionEnd:function(){
//console.log('滑动完成触发回调' + this.realIndex);
},
sliderMove: function(){
//console.log('人为滑动');
},
},
//init: false, //false 禁止初始化，在需要的地方使用 mySwiper.init() 来初始化
})
</script>
</body>
</html>
![vue插件的使用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)