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

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

模块加载名称:carousel

快速使用

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

<!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 - 在每一个细节中,用心与你沟通