Materialise Carousel with Images 消失

Question

我正在使用 Materialize.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>

和 JS：[已编辑]

$(document).ready(function() {
                $('.parallax').parallax();
                $('.carousel.carousel-slider').carousel({full_width: true});
                $('.scrollspy').scrollSpy();
                $('.stat_circles').addClass('animate');
            });

这是它的样子：

一旦我将 <img> 元素添加到其中一个 .carousel_item_inner <div> 中，轮播就完全消失了。这是带有 <img> 的 carousel-item 之一：

<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>。非常感谢所有帮助，提前致谢！

这里还有一个 link 到 Materialise Carousel：http://materializecss.com/carousel.html

编辑：
这是一个 jsfiddle

https://jsfiddle.net/5cjaduwv/9/

Answer 1

您是否尝试将 <img> 元素放在 <p> 元素之间？

Answer 2

只是为了进行完整性检查，您可以尝试将该 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>

我能够在 fiddle 中重现您的错误，它归结为 JS 与 jQuery 的依赖关系并具体化。你能分享你的脚本列表和它们所在的位置吗？我通常将它们放在 body 的末尾，因此 DOM 首先加载。 jQuery 应该是第一个库，下面是其他库。

Answer 3

Materialize 的默认轮播似乎并不是为了将 img 和文本放在同一个容器中而设计的，它们只是一个接一个地显示。

相反，试试滑块：http://materializecss.com/media.html

Materialise Carousel with Images 消失

Materialize Carousel with Images disappears

html

javascript

css

jquery

materialize