vue-cli用swiper插件

官网：https://www.npmjs.com/package/vue-awesome-swiper

安装：

npm install vue-awesome-swiper --save

main.js引入；

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// require styles
import 'swiper/dist/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default global options } */)

下面举例子介绍使用方法：

展示效果是：

          
            

              
              
              
降低司法成本
              

                
                
降低司法成本
                
LegalXChain联盟链的合约记录在账本上。无论事件有任何意义，合约都被看作是强有力的证据，并具有法律约束力。
              
            
          
          
            

              
              
              
打破数据孤岛
              
            
          
          
            

              
              
              
提升维权效率
              
            
          

          
            

              
              
              
引领司法服务转型升级
            
            
          
          
            

              
              
              
提高全社会契约执行效率
            
            
          
          

          

          

          

        

data() {
    return {
      //所有的参数同 swiper 官方 api 参数
      swiperOption: {
        slidesPerView: 4,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },

computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
},
mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
}