搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

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

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

模块加载名称:carousel

快速使用

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

对应的代码code

  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. <div class="layui-carousel" id="test1">
  10. <div carousel-item>
  11. <div>条目1</div>
  12. <div>条目2</div>
  13. <div>条目3</div>
  14. <div>条目4</div>
  15. <div>条目5</div>
  16. </div>
  17. </div>
  18. <!-- 条目中可以是任意内容,如:<img src=""> -->
  19. <script src="/static/build/layui.js"></script>
  20. <script>
  21. layui.use('carousel', function(){
  22. var carousel = layui.carousel;
  23. //建造实例
  24. carousel.render({
  25. elem: '#test1'
  26. ,width: '100%' //设置容器宽度
  27. ,arrow: 'always' //始终显示箭头
  28. //,anim: 'updown' //切换动画方式
  29. });
  30. });
  31. </script>
  32. </body>
  33. </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 是否自动切换 boolean true
interval 自动切换的时间间隔,单位:ms(毫秒),不能低于800 number 3000
index 初始开始的条目索引 number 0
arrow 切换箭头默认显示状态,可选值为:
  • hover(悬停显示)
  • always(始终显示)
  • none(始终不显示)
string 'hover'
indicator 指示器位置,可选值为:
  • inside(容器内部)
  • outside(容器外部)
  • none(不显示)

注意:如果设定了 anim:'updown',该参数将无效
string 'inside'
trigger 指示器的触发事件 string 'click'
切换事件

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

</>code

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

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

</>code

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

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

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