vue.js中使用swiper插件实现图片轮播

第一步：安装swiper：npm install swiper@3.4.1 --save-dev

完成之后，你会在项目的node_modules文件夹中多一个swiper文件夹。

第二步：引用组件

import Swiper from 'swiper';

import 'swiper/dist/css/swiper.min.css';

第三步：html中如何使用：

[code] <div class="swiper-container" style="width:372px;height:200px;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://img01.hua.com/uploadpic/newpic/9010011.jpg" alt="" width="100%">
</div>
<div class="swiper-slide">
<img src="https://img01.hua.com/uploadpic/newpic/201709151725388540.jpg" alt="" width="100%">
</div>
<div class="swiper-slide">
<img src="https://img01.hua.com/uploadpic/newpic/201709011117442888.jpg" alt="" width="100%">
</div>
</div>
</div>

vue代码：

[code]mounted(){
var mySwiper = new Swiper('.swiper-container', {
autoplay:3000,
speed:300,
loop:true,
onClick: function(swiper){
alert('你点了Swiper');
alert(mySwiper.realIndex);     //当前索引
}
})
}