通用轮播组件文档 - layui.carousel

carousel 是 layui 2.0 版本中新增的全新模块，主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何类型内容的轮播式切换操作，更可以胜任 FullPage （全屏上下轮播）的需求，简洁而不失强劲，灵活而优雅。

模块加载名称：carousel

快速使用

如下是几个常用的轮播示例，其中背景色是为了区分条目单独加的，在layui框架中并不会包含。条目区域可以放上文字列表、图片等任意内容

条目1

条目2

条目3

条目4

条目5

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>carousel模块快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div>条目1</div>
    <div>条目2</div>
    <div>条目3</div>
    <div>条目4</div>
    <div>条目5</div>
  </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
});
</script>
</body>
</html>

在HTML结构中，只需要简单地注意这两项：
1) 外层元素的 class="layui-carousel" 用来标识为一个轮播容器
2) 内层元素的属性 carousel-item 用来标识条目

而 id 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。

基础参数选项

通过核心方法：carousel.render(options) 来对轮播设置基础参数，也可以通过方法：carousel.set(options) 来设定全局基础参数.

可选项	说明	类型	默认值
elem	指向容器选择器，如：elem: '#id'。也可以是DOM对象	string/object	无
width	设定轮播容器宽度，支持像素和百分比	string	600px
height	设定轮播容器高度，支持像素和百分比	string	280px
full	是否全屏轮播	boolean	false
anim	轮播切换动画方式，可选值为： default（左右切换） updown（上下切换） fade（渐隐渐显切换）	string	default
autoplay	是否自动切换，可选值为： true （自动滚动，鼠标移入会暂停、移出重新恢复） false（不自动滚动） always （始终自动滚动，不受鼠标移入移出影响）注：此 always 值为 v2.7.0 新增	boolean	true
interval	自动切换的时间间隔，单位：ms（毫秒），不能低于 800	number	3000
index	初始开始的条目索引	number	0
arrow	切换箭头默认显示状态，可选值为： hover（悬停显示） always（始终显示） none（始终不显示）	string	hover
indicator	指示器位置，可选值为： inside（容器内部） outside（容器外部） none（不显示）注意：如果设定了 anim: 'updown'，则 indicator 参数的 outside 值无效	string	inside
trigger	指示器的触发事件	string	click
change	轮播切换后的回调函数，返回一个对象参数。注：v2.7.0 新增	function	-

切换事件

轮播的每一次切换时触发，回调函数返回一个 object 参数，包含的成员如下：

var carousel = layui.carousel;
 
//触发轮播切换事件
carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
  console.log(obj.index); //当前条目的索引
  console.log(obj.prevIndex); //上一个条目的索引
  console.log(obj.item); //当前条目的元素对象
});

一般为了便于书写，切换后的操作建议直接写在 render 方法的回调中：

carousel.render({
  elem: '#id',
  change: function(obj){ // 注：v2.7.0 新增
    console.log(obj); // 返回结果跟上述 change 事件相同
  }
})

重置轮播

事实上，在执行 carousel.render(options) 方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。

var ins = carousel.render(options);
 
//重置轮播
ins.reload(options);

结语

由于轮播的使用非常简单，所以本篇不做过于详细的讲解，核心在于基础参数选项的设置。你也可以前往示例页面进行更为直观的了解。

layui - 在每一个细节中，用心与你沟通

 通用轮播组件文档 - layui.carousel

通用轮播组件文档 - layui.carousel