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 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>

瀏覽器支持

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

貢獻(xiàn)

Fork it! Create your feature branch: git checkout -b my-new-feature Commit your changes: git commit -am 'Add some feature' Push to the branch: git push origin my-new-feature Submit a pull request

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。