• 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元素的对象引用。
    与尘埃中开出花朵。
  • 相关阅读:
    Mysql 安装
    网站搭建 so easy
    git 命令!!!!!!!!!!!
    git branch 管理常用命令
    Java开发环境的搭建以及使用eclipse从头一步步创建java项目
    git 放弃本地修改 强制更新
    java算法之猴子排序睡眠排序
    sql业务需求,查询每个分类下的前两n条数据
    mysql安装
    linux服务自启
  • 原文地址:https://www.cnblogs.com/congfeicong/p/11804271.html
Copyright © 2020-2023  润新知