Options - Layui — ContextQMD

绑定元素选择器或 DOM 对象

</td> <td>string/DOM</td> <td>-</td> </tr> <tr> <td>width</td> <td>

设定轮播容器宽度，值支持：像素、auto、百分比。

</td> <td>string</td> <td>

600px

</td> </tr> <tr> <td>height</td> <td>

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

</td> <td>string</td> <td>

280px

</td> </tr> <tr> <td>full</td> <td>

是否全屏轮播

</td> <td>boolean</td> <td>

false

</td> </tr> <tr> <td>anim</td> <td>

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

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

</td> <td>string</td> <td>

default

</td> </tr> <tr> <td>autoplay</td> <td>

是否自动切换，可选值有：

true 自动滚动，鼠标移入会暂停、移出重新恢复
false 不自动滚动
always 始终自动滚动，不受鼠标移入移出影响 <sup>2.7+</sup>

</td> <td>boolean string</td> <td>

true

</td> </tr> <tr> <td>interval</td> <td>

自动切换的时间间隔，单位： ms （毫秒），不能低于 800

</td> <td>number</td> <td>

3000

</td> </tr> <tr> <td>index</td> <td>

初始开始的条目下标

</td> <td>number</td> <td>

0

</td> </tr> <tr> <td>arrow</td> <td>

切换箭头默认显示状态，可选值有：

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

</td> <td>string</td> <td>

hover

</td> </tr> <tr> <td>indicator</td> <td>

指示器位置，可选值有：

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

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

</td> <td>string</td> <td>

inside

</td> </tr> <tr> <td>trigger</td> <td>

指示器的触发事件

</td> <td>string</td> <td>

click

</td> </tr> <tr> <td colspan="4" style="text-align: center"> <div id="options.callback" class="ws-anchor">

回调函数

</div> </td> </tr> <tr> <td>change <sup>2.7+</sup></td> <td colspan="3"> <div id="options.change" lay-pid="options" class="ws-anchor"> 轮播切换后的回调函数，返回一个对象参数。 </div>

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);
});

</td> </tr> </tbody> </table>

贴士

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