1. <script type="text/javascript">
    2. $(function(){
    3. $('.am-slider').flexslider({
    4. playAfterPaused: 3000,
    5. animation: "fade",
    6. animationLoop: true,
    7. smoothHeight: true,
    8. animationSpeed: 4000
    9. });
    10. });
    11. </script>

主要是控件的属性

{
  animation: "slide",             // String: ["fade"|"slide"],动画效果
  easing: "swing",                // String: 滚动动画计时函数
  direction: "horizontal",        // String: 滚动方向 ["horizontal"|"vertical"]
  reverse: false,                 // Boolean: 翻转 slide 运动方向
  animationLoop: true,            // Boolean: 是否循环播放
  smoothHeight: false,            // Boolean: 当 slide 图片比例不一样时
                                  // "true": 父类自动适应图片高度
                                  // "false": 不自动适应,父类高度为图片的最高高度,默认为false

startAt: 0,                     // Integer: 开始播放的 slide,从 0 开始计数
  slideshow: true,                // Boolean: 是否自动播放
  slideshowSpeed: 5000,           // Integer: ms 滚动间隔时间
  animationSpeed: 600,            // Integer: ms 动画滚动速度
  initDelay: 0,                   // Integer: ms 首次执行动画的延迟
  randomize: false,               // Boolean: 是否随机 slide 顺序

// Usability features
  pauseOnAction: true,            // Boolean: 用户操作时停止自动播放
  pauseOnHover: false,            // Boolean: 悬停时暂停自动播放
  useCSS: true,                   // Boolean: 是否使用 css3 transition
  touch: true,                    // Boolean: 允许触摸屏触摸滑动滑块
  video: false,                   // Boolean: 使用视频的 slider,防止 CSS3 3D 变换毛刺

// Primary Controls
  controlNav: true,               // Boolean: 是否创建控制点
  directionNav: true,             // Boolean: 是否创建上/下一个按钮(previous/next)
  prevText: "Previous",           // String: 上一个按钮文字
  nextText: "Next",               // String: 下一个按钮文字

// Secondary Navigation
  keyboard: true,                 // Boolean: 是否开启键盘左(←)右(→)控制
  multipleKeyboard: false,        // Boolean: 是否允许键盘控制多个 slide
  mousewheel: true,               // Boolean: 是否开启鼠标滚轮控制
  pausePlay: false,               // Boolean: 是否创建暂停与播放按钮
  pauseText: 'Pause',             // String: 暂停按钮文字
  playText: 'Play',               // String: 播放按钮文字

// Special properties
  controlsContainer: "",          // jQuery Object/Selector
  manualControls: "",             // jQuery Object/Selector 自定义控制 slider 的元素,
                                  // 如 "#tabs-nav li img",导航数量和 slide 数量一样
  sync: "",                       // Selector: 关联 slide 与 slide 之间的操作。
  asNavFor: "",                   // Selector: Internal property exposed
for turning the slider into a thumbnail navigation for another slider

// Carousel Options
  itemWidth: 0,                   // Integer: slide 宽度,多个同时滚动时设置
  itemMargin: 0,                  // Integer: slide 间距
  minItems: 1,                    // Integer: 最少显示 slide 数, 与 `itemWidth` 相关
  maxItems: 0,                    // Integer: 最多显示 slide 数, 与 `itemWidth` 相关
  move: 0,                        // Integer: 一次滚动移动的 slide 数量,0 - 滚动可见的 slide

// Callback API
  start: function(){},            // Callback: function(slider) - 初始化完成的回调
  before: function(){},           // Callback: function(slider) - 每次滚动开始前的回调
  after: function(){},            // Callback: function(slider) - 每次滚动完成后的回调
  end: function(){},              // Callback: function(slider) - 执行到最后一个 slide 的回调
  added: function(){},            // Callback: function(slider) - slide 添加时触发
  removed: function(){}           // Callback: function(slider) - slide 被移除时触发

// Amaze UI 扩展参数
  playAfterPaused: null           // Integer: ms 用户停止操作多长时间以后重新开始自动播放
}

Amaze UI——slider的参数说明的更多相关文章

  1. 幻灯片插件FlexSlider -- Amaze UI幻灯片参数

    用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...

  2. Amaze UI学习笔记——JS学习历程一

    1.自定义事件 (1)一些组件提供了自定义事件,命名方式为{事件名称}.{组件名称}.amui,用户可以查看组件文档了解.使用这些事件,如: $('#myAlert').on('close.alert ...

  3. 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  4. DoNet开源项目-基于Amaze UI的点餐系统

    帮朋友做的点餐系统,主要是为了让顾客在餐桌上,使用微信扫描二维码,就可以直接点菜,吃完使用微信付款. 系统演示地址,账户名和密码均为:admin.(请不要删除admin用户) GitHub Clone ...

  5. 有了bootstrap,为什么还要做amaze ui

    1.Bootstrap介绍Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  6. 移动端 前端框架 amaze ui

    移动端 前端框架 amaze ui http://amazeui.org/?_ver=2.x

  7. Amaze UI 是一个移动优先的跨屏前端框架。 http://amazeui.org/

    http://amazeui.org/ Amaze UI 是一个移动优先的跨屏前端框架.... Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适 ...

  8. 十、VueJs 填坑日记之在项目中使用Amaze UI

    上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Amaze UI 含近 20 个 CSS 组件.20 余 JS 组件,更有多个包含不同主 ...

  9. 十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

    上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题.今天我们来重新调整一下列表页面和内容页面,使我们做的后台 ...

随机推荐

  1. Web操作web.config

    1.引用System.Configuration.DLL 2.引用命名空间System.Configuration和System.Web.Configuration 3.上代码 // 使用指定的虚拟路 ...

  2. C# Math类简介运用

    总结了一下几个常用的Math类 /* ######### ############ ############# ## ########### ### ###### ##### ### ####### ...

  3. Master of GCD 【线段树区间更新 || 差分】

    Master of GCD 时间限制: 1 Sec  内存限制: 128 MB 提交: 670  解决: 112 [提交] [状态] [命题人:admin] 题目描述 Hakase has n num ...

  4. c 语言中宏定义和定义全局变量的区别

    宏定义和定义全局变量的区别: 1 作用时间不同. 宏定义在编译期间即会使用并替换,而全局变量要到运行时才可以. 2 本质类型不同. 宏定义的只是一段字符,在编译的时候被替换到引用的位置.在运行中是没有 ...

  5. 题解——Codeforces Round #508 (Div. 2) T1 (模拟)

    依照题意暴力模拟即可A掉 #include <cstdio> #include <algorithm> #include <cstring> #include &l ...

  6. (转)Introduction to Gradient Descent Algorithm (along with variants) in Machine Learning

    Introduction Optimization is always the ultimate goal whether you are dealing with a real life probl ...

  7. hadoop的Linux操作

    初学hadoop之linux系统操作的hdfs的常用命令 Hadoop之HDFS文件操作 Hadoop fs命令详解 官网doc sudo su - hdfs:免密,以hdfs账户登陆.可操作hdfs ...

  8. Entity Framework Core导航属性加载问题

    前言 今天下午在开发的时候发现EF Core实体模型中的导航属性为 null,经排查既不是没有加 virtual 关键字,也不是外键关系映射错误. 解决方法 通过查询官网文档,发现,原因在于EF Co ...

  9. 【Luogu P2764】最小路径覆盖问题

    网络流 \(24\) 题之一. Problem Description 给出一个 \(n\) 个点 \(m\) 条边的 \(DAG\) ,求最小路径点覆盖,并输出路径选择方案. Input Forma ...

  10. 51nod 1689 逛街(优先队列)

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1689 题意: 题意: 枚举终点,这样就确定路上的花费,接下来只需要计算进 ...