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 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
js实现盒子移动动画效果
Aug 09 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
基于mysql的bbs设计(四)
2006/10/09 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
php引用传值实例详解学习
2013/11/06 PHP
浅析php原型模式
2014/11/25 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python实现数据库编程方法详解
2015/06/09 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
python3中property使用方法详解
2019/04/23 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
Python内置函数locals和globals对比
2020/04/28 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
铭万公司.net面试题笔试题
2014/07/20 面试题
电气自动化大学生求职信
2013/10/16 职场文书
创业计划书撰写原则
2014/01/25 职场文书
素质拓展感言
2014/01/29 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
小学运动会开幕词
2016/03/04 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server