zoukankan      html  css  js  c++  java
  • OwlCarousel2使用

    1、官网

    http://owlcarousel2.github.io/OwlCarousel2/index.html

    2、常用参数

    参数名称 参数类型 默认值 描述
    items Number 3 在屏幕中可见的旋转木马项
    margin Number 0 旋转木马项的margin-right值,单位像素
    loop Boolean false 是否无限循环,会复制第一项和最后一项来制作无限循环的错觉
    center Boolean false 旋转木马项居中。在奇数和偶数项中都可以很好的工作
    mouseDrag Boolean true 是否可以使用鼠标拖拽
    touchDrag Boolean true 是否可以触摸拖拽
    pullDrag Boolean true Stage pull to edge.
    freeDrag Boolean false Item pull to edge
    stagePadding Number 0 Stage上的Padding left和Padding right(可以看到相邻的项)
    merge Boolean false 合并旋转木马项。Looking for data-merge='{number}' inside item.
    mergeFit Boolean true 如果屏幕比旋转木马项小,使旋转木马项适合屏幕大小
    autoWidth Boolean false 设置非网格内容。尝试在div上使用width样式
    startPosition Number/String 0 开始点或URL Hash字符串,如:'#id'
    URLhashListener Boolean false 监听url hash 的变化。必须在旋转木马项上设置data-hash属性
    nav Boolean false 显示ext/prev按钮
    navRewind Boolean true 跳转到前一项或后一项
    navText Array ['next','prev'] HTML箭头导航
    slideBy Number/String 1 Navigation slide by x. 'page' string can be set to slide by page.
    dots Boolean true 显示圆点导航按钮
    dotsEach Number/Boolean false Default: false 每多少个项显示一个圆点导航按钮
    dotData Boolean false 使用data-dot的内容
    lazyLoad Boolean false 是否懒加载图片。data-src和data-src-retina为高分辨率。如果元素不是<img>会设置为元素的内联背景图像。
    lazyContent Boolean false lazyContent选项只在测试版中有,发行版中已经被删除。
    autoplay Boolean false 旋转木马是否自动播放
    autoplayTimeout Number 5000 旋转木马自动播放的时间间隔
    autoplayHoverPause Boolean false 是否在鼠标滑过时停止自动播放
    smartSpeed Number 250 速度计算
    fluidSpeed Boolean Number 速度计算
    autoplaySpeed Number/Boolean false 是新密码自动播放的速度
    navSpeed Number/Boolean false 旋转木马导航的速度
    dotsSpeed Boolean Number/Boolean 分页的速度
    dragEndSpeed Number/Boolean false Drag end speed
    callbacks Boolean true 是否允许回调函数
    responsive Object empty object 包含responsive选项的对象。设置为flase取消responsive能力。
    responsiveRefreshRate Number 200 Responsive的刷新频率
    responsiveBaseElement DOM element window 可以设置在任何DOM元素上。如果你关心不支持响应式的浏览器(如IE8),可以在包裹容器中使用该属性。
    responsiveClass Boolean false 可选的辅助class。添加owl-reponsive-和breakpoint class到主元素上。可以在给定breakpoint的元素上设置内容样式。
    video Boolean false 是否允许添加YouTube/Vimeo视频。
    videoHeight Number/Boolean false 设置视频的高度。
    videoWidth Number/Boolean false 设置视频的宽度。
    animateOut String/Bolean false CSS3 animation out.
    animateIn String/Bolean false CSS3 animation in.
    fallbackEasing String swing Easing for CSS2 $.animate.
    info Function false 获取基本信息的回调函数(当前的 item/pages/widths) 。Info函数的第二个参数是Owl DOM元素的对象引用。
    与尘埃中开出花朵。
  • 相关阅读:
    ubuntu 下redis的安装简介
    Oracle 的几种循环方式介绍
    NIO 概述 与 通信实例
    io 的一些简单说明及使用
    webSocket的 原理 及 实现
    事务 与事务的 隔离级别 简单说明
    case 函数的简单使用记录下
    java HttpClient 忽略证书的信任的实现 MySSLProtocolSocketFactory
    南京小吃八绝
    JavaScript图表库(百度)
  • 原文地址:https://www.cnblogs.com/congfeicong/p/11804271.html
Copyright © 2011-2022 走看看