Layui轮播生效需满足三要素：carousel-item必须为layui-carousel的直接子元素；事件监听须通过lay-filter而非ID绑定；动态调整高度应调用inst.reload()而非重复render。
轮播容器结构必须严格符合 carousel-item 嵌套规则
很多人轮播不生效，根本不是 js 写错了，而是 html 结构没对齐 layui 的解析逻辑。layui 不识别任意 div 嵌套，只认外层 class="layui-carousel" + 内层唯一一个带 carousel-item 属性的容器 —— 且这个容器必须是 layui-carousel 的**直接子元素**。
- ✅ 正确：
<div class="layui-carousel"><div carousel-item><div>...</div></div></div> - ❌ 错误：
<div class="layui-carousel"><section><div carousel-item>...</div></section></div>（中间多了一层section） - ❌ 错误：
<div class="layui-carousel"><div carousel-item></div><div carousel-item></div></div>（多个carousel-item容器会被合并处理，但顺序错乱、指示器错位）
另外，每个轮播项（即 carousel-item 的直接子元素）建议用 <div> 包一层内容，哪怕只放一张图 —— 否则某些旧版 Layui 在 IE 或移动端可能触发渲染异常。
carousel.render() 必须传 elem，其他参数大多可省略但别硬写默认值
Layui 的 carousel.render() 是个“懒初始化”函数：只要传了 elem，它就会按内部默认值补全其余配置。强行写一堆看似“稳妥”的参数，反而容易埋坑。
-
width和height：设成'100%'或固定像素都行，但若设height: '100%'且父容器没高度，轮播会塌缩成一条线 —— 这是最常见的白屏原因 -
autoplay：默认就是true，不用显式写；如果想禁用，写autoplay: false即可；'always'是特殊模式（鼠标悬停也不暂停），慎用 -
anim：默认是'default'（左右滑动），'fade'渐隐渐显更柔和，但低端设备上可能卡顿；'updown'仅在全屏或高宽比固定时可用，否则动画变形
推荐最小初始化写法：
layui.use('carousel', function(){<br> var carousel = layui.carousel;<br> carousel.render({ elem: '#banner' });<br>});
响应式高度要靠 inst.reload() 动态调整，不能只靠 CSS 媒体查询
CSS 的 @media 可以改样式，但 Layui 轮播组件内部高度是 JS 计算并内联到 DOM 上的。你用媒体查询把容器 height 改了，轮播内容区域和导航按钮却还按旧高度定位 —— 导致点击偏移、指示器错位、图片裁剪异常。
- 必须监听
resize事件，拿到实例后调用reload() - 别在
resize里反复调render()—— 那会重建整个轮播，造成闪烁和事件丢失 - 移动端 resize 触发频繁，建议加简单节流（比如用
setTimeout防抖）
示例关键逻辑：
var inst = carousel.render({ elem: '#banner', height: '500px' });<br>function adjust(){<br> var h = $(window).width() > 768 ? '500px' : '300px';<br> inst.reload({ height: h });<br>}<br>$(window).on('resize', adjust);
监听切换事件必须匹配 lay-filter，不是靠 ID
这是文档里藏得最深也最容易翻车的一点：Layui 的事件绑定机制依赖的是 lay-filter 属性，而不是容器的 id。如果你写了 id="banner" 却没写 lay-filter="banner"，那 carousel.on('change(banner)') 根本不会触发。
- HTML 中务必加上：
<div class="layui-carousel" id="banner" lay-filter="banner"> - JS 中监听写法必须严格对应：
carousel.on('change(banner)', function(obj){ ... }) - 同一个页面多个轮播，
lay-filter值必须唯一，否则事件会串扰
漏掉 lay-filter 是「轮播能动但事件不响」类问题的头号原因 —— 它不报错，也不警告，就安静地失效。
carousel-item 是否直系子元素、lay-filter 是否配对、reload 是否替代了错误的 render 重建。 
