一套开源的 Web UI 组件库。采用自身极简的模块化规范,并遵循原生 HTML/CSS/JS 的开发模式,极易上手,开箱即用。非常适合网页界面的快速构建。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

3.4 KiB

属性名 描述 类型 默认值
elem

绑定元素选择器或 DOM 对象

string/DOM -
width

设定轮播容器宽度,值支持:像素auto百分比

string

600px

height

设定轮播容器高度,值支持的类型同 width 属性

string

280px

full

是否全屏轮播

boolean

false

anim

轮播切换动画方式。可选值有:

  • default 左右切换
  • updown 上下切换
  • fade 渐隐渐显切换
boolean

default

autoplay

是否自动切换,可选值有:

  • true 自动滚动,鼠标移入会暂停、移出重新恢复
  • false 不自动滚动
  • always 始终自动滚动,不受鼠标移入移出影响 2.7+
boolean
string

true

interval

自动切换的时间间隔,单位: ms (毫秒),不能低于 800

number

3000

index

初始开始的条目下标

number

0

arrow

切换箭头默认显示状态,可选值有:

  • hover 鼠标悬停显示
  • always 始终显示
  • none 始终不显示
string

hover

indicator

指示器位置,可选值有:

  • inside 显示在容器内部
  • outside 显示在容器外部
  • none 不显示

注 : 若设定了 anim: 'updown' ,则 outside 值无效

string

inside

trigger

指示器的触发事件

string

click

change 2.7+
轮播切换后的回调函数,返回一个对象参数。
carousel.render({
  elem: '#id',
  change: function(obj){
    console.log(obj.index); // 当前条目的索引
    console.log(obj.prevIndex); // 上一个条目的索引
    console.log(obj.item); // 当前条目的元素对象
  }
});

注:在 2.7 之前的版本,需通过 carousel 的 change 事件来实现,如:

var carousel = layui.carousel;

// 轮播渲染
carousel.render(options); 

// 触发轮播切换事件
carousel.on('change(filter)', function(obj){ // filter 对应轮播容器的 lay-filter 属性值
  console.log(obj);
});  

贴士

若轮播的填充内容为图片,且 widthheight 为自适应,那么需动态获取父容器宽高,从而适配父容器。 当浏览器窗口尺寸发生变化时,可在窗口 resize 事件中通过轮播重载来重设宽高值。