Question

我在一个模态中集成物化旋转木马滑块时遇到了一些问题。我无法找到问题，我无法通过google或materializecss网站找到可能的解决方案。所以这是我的问题：

我创建了一个图库，您可以在其中单击打开带有集成的fullWidth滑块的模式的图像。打开模态工作正常，但我根本无法在模态中看到我的图像。只有在我调整浏览器大小时才会显示图像。

我正在使用angular5，我使用materializecss进行页面设计。

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

首先我认为这是我的angular5应用程序的一个问题，所以我尝试用自然方式创建一个带有carouse-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，因为隐藏了模态。因此，旋转木马的高度为零。

我分叉你的例子并更新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);
    }
});

希望这有帮助。

Answer 2

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

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

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

materializecss轮播滑块模态

2 个答案: