npm install vue-concise-slider --save

<template><!-- 制作一個框架包裹slider --> <div style="width:70%;margin:20px auto;height:400px">   <!-- 配置slider組件 -->   <slider :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>     <!-- 設置loading,可自定義 -->     <div slot="loading">loading...</div>   </slider> </div></template><script>import slider from 'vue-concise-slider'// import slider componentsexport default {  el: '#app',  data () {   return {    //Image list    pages:[     {     html: '<div class="slider1">slider1</div>',     style: {      'background': '#1bbc9b'      }     },     {      html: '<div class="slider2">slider2</div>',      style: {       'background': '#4bbfc3'      }     },     {      html: '<div class="slider3">slider3</div>',      style: {       'background': '#7baabe'      }     }    ],    //Sliding configuration [obj]    sliderinit: {     currentPage: 0,     thresholdDistance: 500,     thresholdTime: 100,     autoplay:1000,     loop:true,     direction:'vertical',     infinite:1,     slidesToScroll:1,     timingFunction: 'ease',     duration: 300    }   }  },  components: {    slider  },  methods: {   // Listener event   slide (data) {    console.log(data)   },   onTap (data) {    console.log(data)   },   onInit (data) {    console.log(data)   }  }}</script>