vue輪播圖插件vue-concise-slider的使用

更新時(shí)間：2018年03月13日 09:40:14 作者：warpcgd

這篇文章主要介紹了vue輪播圖插件vue-concise-slider的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

vue-concise-slider

vue-concise-slider,一個(gè)簡(jiǎn)單的滑動(dòng)組件,配置簡(jiǎn)單,支持自適應(yīng)/全屏+按鈕+分頁(yè),同時(shí)兼容移動(dòng)端和PC端

版本

v2.4.7 支持vue2.0+

特點(diǎn)

簡(jiǎn)單配置
輕量 (~24kB gzipped)
多種滑動(dòng)樣式

目前已實(shí)現(xiàn)

全屏自適應(yīng)
移動(dòng)端兼容
垂直滾動(dòng)
定時(shí)自動(dòng)切換
不定寬度滾動(dòng)
無(wú)縫循環(huán)滾動(dòng)
多級(jí)滾動(dòng)
漸變滾動(dòng)
旋轉(zhuǎn)滾動(dòng)
page中加入自定義組件

未來(lái)將實(shí)現(xiàn)

漸變滾動(dòng)
視差效果

鏈接

文檔
demo

安裝

npm install vue-concise-slider --save

如何使用

<template>
<!-- 制作一個(gè)框架包裹slider -->
 <div style="width:70%;margin:20px auto;height:400px">
   <!-- 配置slider組件 -->
   <slider :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
     <!-- 設(shè)置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>

瀏覽器支持

現(xiàn)代瀏覽器及ie10+

貢獻(xiàn)