我在将物化轮播 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 框架中的一个已知问题?
最佳答案
由于模式被隐藏,轮播的高度被计算为 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);
}
});
希望对您有所帮助。
关于javascript - MaterializeCSS 轮播 slider 模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50392358/