通過layui輪播圖展示ajax動態數據的問題

<div class="layui-carousel" id="carouselView">
    <div carousel-item="" id="preview">

    </div>
</div>

function initCarousel(){
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel;
        $.ajax({
            url:'GetCarouselServlet',
            type:'post',
            data:{
                isDisplay:1
            },
            dataType:'json',
            success:function (data) {
                $.each(data,function (i,n) {
                    var str = '<div>\n' +
                        '         <img src="../upload/'+n.picUrl+'" alt="" style="width: 600px;height: 320px;">\n' +
                        '      </div>';
                    $('#preview').append(str);

                });
                //改變下時間間隔、動畫類型、高度
                var ins = carousel.render({
                    elem: '#carouselView'
                    ,interval: 2000
                    ,arrow: 'always'
                    ,anim: 'default'
                    ,width:'600px'
                    ,height:'320px'
                });
                ins.reload({
                    elem: '#carouselView'
                    ,interval: 2000
                    ,arrow: 'always'
                    ,anim: 'default'
                    ,width:'600px'
                    ,height:'320px'
                });
            },
            error:function () {
                alert("數據庫查詢失敗，請聯系管理員！")
            }
        });
    });
}

initCarousel();

網上找了半天解決方法，也沒搞明白，我想起layui框架在form表單渲染的時候在ajax里寫過form.render('form')這樣的代碼

就想到把layui輪播圖設置，放在加載數據后，在設置輪播圖的屬性，另外一定要加 ins.reload()這個方法，這個是重置輪播圖用的！！