部分视图中的旋转木马不渲染

Question

我有一个ajax调用，返回一个局部视图（带有图像的轮播）并将其放在Modal中。一切正常，但旋转木马不会立即显示图像。

如果按F12或调整窗口大小，图像将呈现。或者如果我使用旋转木马控件循环浏览两个图像，则图像显示在第二轮。

模态在页面加载的主视图上是部分的，但在ajax返回图像之前不保留任何内容。

@Html.Partial("_ImageCarouselModal")

我是否需要重新绘制轮播，还是归结为初始化顺序？

这是我目前的ajax电话：

$.ajax({
    type: "POST",
    url: "/GetImages",
    success: function (data) {

        $("#imageModal .modal-body").html(data);
        $("#imageModal").modal('show');
        carousel();
    }
});

function carousel() {
    $('.image-carousel').slick({
        infinite: true,
        speed: 500,
        fade: true,
        cssEase: 'linear',
        adaptiveHeight: true,
        accessibility: false
    });
}

模态是标准的HTMl模态。

Answer 1

当我输入这个时，我看到了这个问题的快速修复并且它正常工作。它不优雅，但它的工作。

$('.modal').on('shown.bs.modal', function (e) {
    $('.image-carousel').resize();
});