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


Posted in Javascript onMarch 13, 2018

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

贡献

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
vue实现百度搜索功能
Dec 28 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
JS数组方法some、every和find的使用详情
Oct 05 Javascript
vue页面离开后执行函数的实例
Mar 13 #Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 #Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 #Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 #Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 #Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 #Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 #Javascript
You might like
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
php事件驱动化设计详解
2016/11/10 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
javascript基本类型详解
2014/11/28 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
毕业生求职信的经典写法
2014/01/31 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
活动总结怎么写
2014/04/28 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
民间个人借款协议书
2014/09/30 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
为Centos安装指定版本的Docker
2022/04/01 Servers
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android