vue中插入swiper轮播插件

创建vue项目流程这里就不用废话了吧？还不知道就在我前几篇中有写。

vue全家桶之（一）使用 vue-cli 创建模板项目

今天我们的大屏项目中有了一个新的需求，数据模块的切换，毫无疑问，swiper插件不二之选。原生的写法官网直接给了，那么这里介绍一下在vue中使用swiper插件的方法。

http://www.swiper.com.cn/  =>swiper中文网

http://www.swiper.com.cn/download/index.html   =>库的下载地址

<link rel="stylesheet" href="./static/swiper-4.3.3.min.css">     在index.html中引入swiper的css文件

在你想使用的组件中引用swiper，也可以在main.js中全局引用，我这里直接在组件中用了

import Swiper from '../../static/swiper-4.3.3.min'

HTML部分，写在<template>标签里

</div><div class="swiper-container">
    <div class="swiper-wrapper">
         <div class="swiper-slide"><Food/></div>
         <div class="swiper-slide"><Food/></div>
         <div class="swiper-slide"><Food/></div>
   </div>
</div>

组件js部分

    mounted(){
      this.mySwiper()        //这里要调用methods中的方法，一定记得调用
    },
    methods:{
      mySwiper(){
        let mySwiper=new Swiper ('.swiper-container', {
          direction: 'vertical',    //翻转方向
          loop: true,
          autoplay:{      //自动播放，里面有很多参数可以根据需求进行调试
            delay:5000,
          },
          effect : 'coverflow',   //翻转方式
         })
      }
    }

然后就可以看到效果啦！

其实，swiper非常的好用，现在大部分的轮播效果都用这个插件吧，另外在移动端的使用好像更为广泛，官方上的介绍非常详细，还有API文档写的也很详细，可以根据需求慢慢调试你想要的效果。还是很好玩的。