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

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

模块加载名称：carousel

快速使用

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

轮播 carousel - 图1

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>carousel模块快速使用</title>
  6.   <link rel="stylesheet" href="/static/build/layui.css" media="all">
  7. </head>
  8. <body>
  9.  
  10. <div class="layui-carousel" id="test1">
  11.   <div carousel-item>
  12.     <div>条目1</div>
  13.     <div>条目2</div>
  14.     <div>条目3</div>
  15.     <div>条目4</div>
  16.     <div>条目5</div>
  17.   </div>
  18. </div>
  19. <!-- 条目中可以是任意内容，如：<img src=""> -->
  20.  
  21. <script src="/static/build/layui.js"></script>
  22. <script>
  23. layui.use('carousel', function(){
  24.   var carousel = layui.carousel;
  25.   //建造实例
  26.   carousel.render({
  27.     elem: '#test1'
  28.     ,width: '100%' //设置容器宽度
  29.     ,arrow: 'always' //始终显示箭头
  30.     //,anim: 'updown' //切换动画方式
  31.   });
  32. });
  33. </script>
  34. </body>
  35. </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是否全屏轮播booleanfalse
anim轮播切换动画方式，可选值为：
  • default（左右切换）
  • updown（上下切换）
  • fade（渐隐渐显切换）
string‘default’
autoplay是否自动切换booleantrue
interval自动切换的时间间隔，单位：ms（毫秒），不能低于800number3000
index初始开始的条目索引number0
arrow切换箭头默认显示状态，可选值为：
  • hover（悬停显示）
  • always（始终显示）
  • none（始终不显示）
string‘hover’
indicator指示器位置，可选值为：
  • inside（容器内部）
  • outside（容器外部）
  • none（不显示）

注意：如果设定了 anim:’updown’，该参数将无效		string‘inside’
trigger指示器的触发事件string‘click’

切换事件

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

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

重置轮播

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

  1. var ins = carousel.render(options);
  2.  
  3. //重置轮播
  4. ins.reload(options);
  5.

结语

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

layui - 用心与你沟通