materializecss旋转木马滑块模态 [英] materializecss carousel slider modal

问题描述

在将我的实体化旋转木马滑块集成到模态中时，我遇到一些问题.我找不到问题，也无法通过Google或materializecss网站找到可能的解决方案.所以这是我的问题:

我创建了一个图库，您可以在其中单击带有集成的fullWidth-slider打开模态的图像.打开模态可以正常工作，但是我根本看不到模态内部的图像.仅当我调整浏览器大小时，图像才会出现.

我正在使用angular5，并且在我的页面设计中使用了materializecss.

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

首先，我认为我的angular5应用存在问题，因此我尝试以本机方式创建一个内部带有轮播滑块的模态(意味着没有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框架中这是一个已知问题?

解决方案

更新了JSFiddel

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

我派生了您的示例，并更新了JS以使用Materialize初始化函数.初始化模态时，我使用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);
    }
});

希望是有帮助的.

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?

解决方案

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.

这篇关于materializecss旋转木马滑块模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！