时间戳

首页 > 解决方案 > materializecss轮播滑块模式

javascript - materializecss轮播滑块模式

问题描述

我在将我的物化轮播滑块集成到模式中时遇到了一些问题。我找不到问题，也无法通过谷歌或 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框架中的一个已知问题？

标签： javascriptjquerymodal-dialogcarouselmaterialize

解决方案

更新了 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);
    }
});

希望这会有所帮助。

推荐阅读