怎么在vue中使用concise-slider插件

怎么在vue中使用concise-slider插件？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

vue-concise-slider

vue-concise-slider,一個簡單的滑動組件,配置簡單,支持自適應/全屏+按鈕+分頁,同時兼容移動端和PC端

版本

v2.4.7 支持vue2.0+

特點

1. 簡單配置

2. 輕量 (~24kB gzipped)

3. 多種滑動樣式

目前已實現

1. 全屏自適應

2. 移動端兼容

3. 垂直滾動

4. 定時自動切換

5. 不定寬度滾動

6. 無縫循環滾動

7. 多級滾動

8. 漸變滾動

9. 旋轉滾動

10. page中加入自定義組件

未來將實現

1. 漸變滾動

2. 視差效果

鏈接

1. 文檔

2. demo

安裝

npm install vue-concise-slider --save

如何使用

<template>
<!-- 制作一個框架包裹slider -->
 <div >
   <!-- 配置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 components
export 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>

看完上述內容，你們掌握怎么在vue中使用concise-slider插件的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！