materializecss旋转木马滑块模态

Question

I have some problems integrating my materialize carousel-slider in a modal. I can't find the issue and I cant't find a possible solution through google or the materializecss website. So here is my question:

I created a gallery where you click on a image you open a modal with a integrated fullWidth-slider. Opening the modal works fine but I can't see my images inside the modal at all. Only if i resize the browser the images appears.

I'm working with angular5 and I use materializecss for my page design.

(I know there exits a @angular/material and ng2-materialize npm package that are much more better approach, but I just began developing with angular5 and so I thought learn just one new framework (angular5) and use for all other things the frameworks you already know (materializecss))

First I thought it is a problem with my angular5 app, so I tried to create a modal with a carouse-slider inside in the native way (means without angular5). As you can see in my JSFiddel ( https://jsfiddle.net/davetwog/vfkbzu5m/ ) I face the same problem.

<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>

Anyone has a clue what I'm doing wrong? Or is this a known issue in the materializecss framework?

Answer 1

Updated JSFiddel

The height of the carousel was getting calculated as 0px because the modal was hidden. Thus the carousel had zero height.

I forked your example and updated the JS to use the Materialize init functions. When initializing the modal, I used the onOpenEnd option to specify a function that will initialize the carousel once the modal is opened resulting in a carousel that has height.

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

Hope that is helpful.

Answer 2

Another solution with Jquery 3.3.1 and Materialize 1.0.0 :

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

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