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

第一步：安装swiper：npm install [email protected] --save-dev

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

第二步：引用组件

import Swiper from 'swiper';

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

第三步：html中如何使用：

vue代码：

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