我将Materialise.js用于他们可用的一些组件和JS库。我一直在使用的是'carousel'组件。我设置了三个幻灯片,每个幻灯片在幻灯片容器中都有一个<h5>
和一个<p>
元素。这显示了它的预期。一旦我在幻灯片中添加了<img>
元素,整个轮播就会消失。这就是我所说的:
工作轮播代码:
<div class="carousel carousel-slider center z-depth-5" data-indicators="true">
<div class="carousel-fixed-item center">
<paper-button raised class="carousel_button" id="top_button">Download Now</paper-button>
</div>
<div class="carousel-item white-text" href="#one" id="c_one">
<div class="carousel_item_inner">
<h5>Plan</h5>
<p class="white-text">This is your first panel</p>
</div>
</div>
<div class="carousel-item white-text" href="#two" id="c_two">
<div class="carousel_item_inner">
<h5>Create</h5>
<p class="white-text">This is your second panel</p>
</div>
</div>
<div class="carousel-item white-text" href="#three" id="c_three">
<div class="carousel_item_inner">
<h5>Generate</h5>
<p class="white-text">This is your third panel</p>
</div>
</div>
</div>
和IS:[已编辑]
$(document).ready(function() {
$('.parallax').parallax();
$('.carousel.carousel-slider').carousel({full_width: true});
$('.scrollspy').scrollSpy();
$('.stat_circles').addClass('animate');
});
这是它的样子:
一旦我将<img>
元素添加到其中一个.carousel_item_inner <div>
中,旋转木马就完全消失了。这是与<img>
的旋转木马项目之一:
<div class="carousel-item white-text" href="#one" id="c_one">
<div class="carousel_item_inner">
<h5>Plan</h5>
<p class="white-text">This is your first panel</p>
<img src="images/plan.PNG">
</div>
</div>
在这之后,<img>
元素就在那里:
真的很困惑为什么整个旋转木马在幻灯片容器中用<img>
消失了。所有的帮助非常感谢,提前感谢!
这里还有Materialise Carousel的链接:http://materializecss.com/carousel.html
编辑: 这是一个jsfiddle
只是为了进行健全性检查,您可以尝试将js包装在文档中。可能是在加载图像之前调用了js。还要确保您在页面底部加载这些脚本,因为您可能需要加载太长时间才能加载依赖于库的图像。
// Load your JS files here in order of dependencies
// such as: jQuery, Bootstrap, other libs and lastly your custom js files
// KEEP your CSS files in the head of your template.
<script>
$(function(){
$('.carousel.carousel-slider').carousel({full_width: true});
});
</script>
</body>
</html>
我能够在一个小提琴中重现你的错误,它归结为jQuery和物化的JS依赖。您可以共享脚本列表及其所在位置。我通常将它们保留在主体的末端,因此DOM首先加载。 jQuery应该是第一个lib,其他人跟在它下面。
你有没有尝试将<img>
元素放在<p>
元素之间?
Materialise的默认轮播似乎不是设计用于将img和文本保存在同一个容器中,它们只是一个接一个地显示。