vue轮播图插件vue-concise-slider的使用

vue-concise-slider

vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端

版本

v2.4.7 支持vue2.0+

特点

简单配置 轻量 (~24kB gzipped) 多种滑动样式

目前已实现

全屏自适应 移动端兼容 垂直滚动 定时自动切换 不定宽度滚动 无缝循环滚动 多级滚动 渐变滚动 旋转滚动 page中加入自定义组件

未来将实现

渐变滚动 视差效果

链接

文档 demo

安装

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>

浏览器支持

现代浏览器及ie10+

贡献

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持错新站长站。