vue轮播图插件vue-concise-slider的使用
更新时间:2018年03月13日 09:40:14 作者:warpcgd
这篇文章主要介绍了vue轮播图插件vue-concise-slider的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
vue-concise-slider
vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端
版本
v2.4.7 支持vue2.0+
特点
- 简单配置
- 轻量 (~24kB gzipped)
- 多种滑动样式
目前已实现
- 全屏自适应
- 移动端兼容
- 垂直滚动
- 定时自动切换
- 不定宽度滚动
- 无缝循环滚动
- 多级滚动
- 渐变滚动
- 旋转滚动
- page中加入自定义组件
未来将实现
- 渐变滚动
- 视差效果
链接
安装
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 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>
浏览器支持
现代浏览器及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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
axios请求中以params或body形式传递参数的区别浅析
最近在做自己项目中,做一个非常简单的新增用户场景,但是使用原生axios发送post请求的时候,还是踩了不少坑的,下面这篇文章主要给大家介绍了关于axios请求中以params或body形式传递参数的区别的相关资料,需要的朋友可以参考下2023-04-04
最新评论