layui轮播图动态渲染，动态加载图片

直接上代码

最开始出的错误就是轮播图不能显示，注意先要把图片append完成在进行轮播渲染

<!-- 轮播图部分 -->
		<div class="layui-carousel" id="test10">
			<div carousel-item="" id="carousel">
				轮播图
			</div>
		</div>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'carousel','jquery','form'], function() {
        var element = layui.element;
        var carousel = layui.carousel;
        var $ = layui.jquery;
        //图片渲染
        $.ajax({
            url:'你的请求地址',
            success:function (res){
                var carouselList = res.data;
                //清空轮播图(此处可以省略)
                $("#carousel").empty();
                for (var i = 0; i < carouselList.length; i++) {
                    var item = carouselList[i];
                    //src 为你的图片地址
                    $("#carousel").append(`<div><img src="img/${item.image}"></div>`) 
                }
                //=====================这里需要注意
                //先把图片append进去，再渲染轮播
                carousel.render({
                    elem: '#test10',
                    width: '100%', //设置容器宽度
                    height: '500px',
                    arrow: 'always', //始终显示箭头
                    interval: 3000
                });
            }
        })
    })
</script>