如图

html代码(注意:lay-filter="carofilter")
javascript
<div class="layui-carousel" id="test10" lay-filter="carofilter">
<div carousel-item="">
<div><img src="http://layui.apixx.net/res/static/images/layui/demo/1.png"></div>
<div><img src="http://layui.apixx.net/res/static/images/layui/demo/2.png"></div>
<div><img src="http://layui.apixx.net/res/static/images/layui/demo/3.png"></div>
<div><img src="http://layui.apixx.net/res/static/images/layui/demo/4.png"></div>
<div><img src="http://layui.apixx.net/res/static/images/layui/demo/5.png"></div>
<div><img src="http://layui.apixx.net/res/static/images/layui/demo/6.png"></div>
<div><img src="http://layui.apixx.net/res/static/images/layui/demo/7.png"></div>
</div>
</div>
js代码
javascript
<script>
layui.use(['carousel', 'form'], function(){
var carousel = layui.carousel
,form = layui.form;
//图片轮播
carousel.render({
elem: '#test10'
,width: '100%'
,height: "150px"
,interval: 3000
});
// 计算图片等比例高度
function calculateImageHeight() {
var imgObj = $("#test10").find(".layui-this img");
if (imgObj.length > 0) {
var img = new Image();
img.src = imgObj.attr('src');
img.onload = function() {
var originalWidth = this.width;
var originalHeight = this.height;
var currentWidth = imgObj.width();
var ratio = currentWidth / originalWidth;
var newHeight = originalHeight * ratio;
// 设置高度
$("#test10").css('height', newHeight);
}
}
}
// 初始计算
calculateImageHeight();
// 轮播每页都重新计算
carousel.on('change(carofilter)', function(obj){
calculateImageHeight();
});
});
//窗口变化是重新加载
$(window).resize(function () {
window.location.reload()
})
</script>