layui carousel自动调整高度，layui轮播高度自适应

版权声明：图文并茂的微信小程序教程！欢迎转载，请保留作者名字和链接；商业合作请联系子恒老师助理 QQ : 2334512685 https://blog.csdn.net/towtotow/article/details/82875633

在开发大秦视频付费系统时，
使用到layui的轮播组件carousel，
默认高度是280px，
在电脑端效果可以。

但是在手机移动端，
就会有空白，
所以会通过代码，
让layui轮播自动调整高度。

下面的代码参考了官网中的内容
https://fly.layui.com/jie/14318/

css代码

<style>
    /*轮播*/
    .layui-carousel>[carousel-item]{
        overflow: visible;
    }
    .layui-carousel>[carousel-item]>*{
        height: auto;
    }
    .layui-carousel-ind{
        margin-top: -20px;
        top: auto;
        bottom: 10px;
    }
</style>

html代码

<div class="layui-container"> 
    <div class="layui-row">
        <div class="layui-carousel" id="imgbox">
          <div carousel-item id="imgH">
            <div class="img-item"><a href="#"><img src="#" /></a></div>
          </div>
        </div>
    </div>
</div>

js代码

layui.use(['carousel'], function(){
    var carousel = layui.carousel;

    var imgH = document.getElementById('imgbox').querySelector('.img-item').offsetHeight;
    document.getElementById('imgH').style.height = imgH+'px';

    window.onresize = function () {
        var imgH = document.getElementById('imgbox').querySelector('.img-item').offsetHeight;
        document.getElementById('imgH').style.height = imgH+'px';
    };

      //建造实例
      carousel.render({
        elem: '#imgbox'
        ,width: '100%' //设置容器宽度
        ,arrow: 'always' // 悬停显示箭头
        ,indicator: 'inside'
        ,height: 'auto'
      });
});

猛击这里，
观看子恒老师《微信公众号后台开发》系列视频
了解实现过程和下载相关源代码