Javascript ECSS转盘滑块模式

在模式中集成materialize carousel滑块时遇到一些问题。我找不到这个问题，也无法通过谷歌或materializecss网站找到可能的解决方案。所以我的问题是：

我创建了一个图库，你可以点击一个图像，然后打开一个带有完整宽度滑块的模式。打开模态效果很好，但我根本看不到模态中的图像。仅当我调整浏览器大小时，图像才会显示

我正在与angular5合作，我使用物化ECSS进行页面设计

（我知道有一个@angular/material和ng2 materialize npm包是更好的方法，但我刚开始使用angular5开发，所以我想只学习一个新框架（angular5），并将你已经知道的框架（MaterializeCS）用于所有其他事情。）

首先，我认为这是我的angular5应用程序的一个问题，所以我尝试以本地方式创建一个带有旋转滑块的模式（意思是没有angular5）。正如您在我的JSFiddel（）中所看到的，我面临同样的问题。

模态
$（文档）.ready（函数（）{
$（'.modal'）.modal（）；
$（'.carousel'）。carousel({
全宽：真
});
});

有人知道我做错了什么吗？或者这是物化ECSS框架中的已知问题？

旋转木马的高度计算为0px，因为模式已隐藏。因此，旋转木马的高度为零

我介绍了您的示例，并更新了JS以使用Materialize init函数。在初始化模式时，我使用了

onopennd

选项来指定一个函数，一旦模式打开，该函数将初始化旋转木马，导致旋转木马具有高度

$(document).ready(function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, {
        'onOpenEnd': initCarouselModal
    });

    function initCarouselModal() {
        var elems = document.querySelectorAll('.carousel');
        var instances = M.Carousel.init(elems, {'fullWidth': true});
        instances[0].set(2);
    }
});

希望对您有所帮助。

旋转木马的高度计算为0px，因为模式已隐藏。因此，旋转木马的高度为零

我介绍了您的示例，并更新了JS以使用Materialize init函数。在初始化模式时，我使用了

onopennd

选项来指定一个函数，一旦模式打开，该函数将初始化旋转木马，导致旋转木马具有高度

$(document).ready(function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, {
        'onOpenEnd': initCarouselModal
    });

    function initCarouselModal() {
        var elems = document.querySelectorAll('.carousel');
        var instances = M.Carousel.init(elems, {'fullWidth': true});
        instances[0].set(2);
    }
});

---

希望这会有所帮助。

Jquery 3.3.1和Materialize 1.0.0的另一个解决方案：

$('.modal').modal({
    'onOpenEnd': initCarousel
});

function initCarousel() {
   $('.carousel').carousel()
}

---

使用Jquery 3.3.1和Materialize 1.0.0的另一个解决方案：

$('.modal').modal({
    'onOpenEnd': initCarousel
});

function initCarousel() {
   $('.carousel').carousel()
}

谢谢亚历克斯：-）这是非常有帮助的。您是对的，只有当DOM结构已经存在时，才能初始化旋转木马。现在它工作了谢谢亚历克斯：-）这是非常有帮助的。您是对的，只有当DOM结构已经存在时，才能初始化旋转木马。现在它起作用了