部分视图中的轮播不呈现答案

【问题标题】：Carousel In Partial View Not Rendering部分视图中的轮播不呈现
【发布时间】：2019-03-26 14:57:54
【问题描述】：

我有一个 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 模态。

【问题讨论】：

只是出于好奇，为什么你的ajax 类型是“POST”？您没有将数据发布到服务器。
我正在发布一个参考，我只是将其删除为简单的代码，因此它没有不必要的代码
好的。那么您在示例中放置的不是您正在使用的代码？在您的帖子中放置伪代码似乎会适得其反，但是，嘿，每个人都有。
我刚刚删除了 ajax 调用的 data 参数，因为它的一些属性很混乱。

标签： jquery html ajax bootstrap-modal carousel

【解决方案1】：

当我输入此内容时，我看到了此问题的快速修复方法，并且它可以正常工作。它并不优雅，但它的工作原理。

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

【讨论】：