javascript - MaterializeCSS 轮播 slider 模式

Question

我在将物化轮播 slider 集成到模态中时遇到一些问题。我找不到问题，也无法通过谷歌或materializecss网站找到可能的解决方案。所以这是我的问题:

我创建了一个画廊，您可以在其中单击图像打开带有集成全宽 slider 的模式。打开模式工作正常，但我根本看不到模式内的图像。仅当我调整浏览器大小时，才会显示图像。

我正在使用 Angular5，并使用 MaterializeCSS 进行页面设计。

(我知道存在 @angular/material 和 ng2-materialize npm 包，它们是更好的方法，但我刚刚开始使用 Angular5 进行开发，所以我认为只学习一个新框架(Angular5)并用于所有其他框架你已经知道的框架的东西(materializecss))

首先，我认为这是我的 angular5 应用程序的问题，所以我尝试以 native 方式创建一个带有旋转 slider 的模式(意味着没有 angular5)。正如您在我的 JSFiddel ( https://jsfiddle.net/davetwog/vfkbzu5m/ ) 中看到的，我面临同样的问题。

<button data-target="img-modal" class="btn modal-trigger" onClick="$('.carousel').carousel('set', 2);">Modal</button>

<div id="img-modal" class="modal">
  <div class="modal-content">
    <div class="carousel carousel-slider center">
      <a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00290.jpg"></a>
      <a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00383.jpg"></a>
      <a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00445.jpg"></a>
      <a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00448.jpg"></a>
      <a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00453.jpg"></a>
    </div>
  </div>
</div>


<script>
$(document).ready(function() {
    $('.modal').modal();

    $('.carousel').carousel({
       fullWidth: true
    });

});
</script>

有人知道我做错了什么吗？或者这是 MaterializeCSS 框架中的一个已知问题？

Answer 1

Updated JSFiddel

由于模式被隐藏，轮播的高度被计算为 0px。因此轮播的高度为零。

我 fork 了您的示例并更新了 JS 以使用 Materialize init 函数。初始化模式时，我使用 onOpenEnd 选项指定一个函数，该函数将在模式打开后初始化轮播，从而产生具有高度的轮播。

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

希望对您有所帮助。