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 相关文章推荐
js 页面执行时间计算代码
Mar 04 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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 debug 安装技巧
2011/04/30 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
php关联数组快速排序的方法
2015/04/17 PHP
PHP生成器简单实例
2015/05/13 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
Nginx实现反向代理
2017/09/20 Servers
CI框架网页缓存简单用法分析
2018/12/26 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
pandas针对excel处理的实现
2021/01/15 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
农业大学毕业生的个人自我评价
2013/10/11 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
认错检讨书
2014/10/02 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
宿舍管理制度范本
2015/08/07 职场文书