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();
});

部分视图中的轮播无法渲染

1 个答案: