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操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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桌面中心(一) 创建数据库
2007/03/11 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
php图像生成函数之间的区别分析
2012/12/06 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
公务员培训心得体会
2013/12/28 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
班长自荐书范文
2014/02/11 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
三八妇女节标语
2014/10/09 职场文书
安全先进班组材料
2014/12/26 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP