Question

我将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>

和JS：[EDITTED]

$(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

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

Answer 1

只是为了进行健全性检查，您可以尝试将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，其他人跟在它下面。

Answer 2

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

Answer 3

Materialise的默认轮播似乎并不是设计用于将img和文本保存在同一个容器中，它们只是一个接一个地显示。

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

带图像的物化轮播消失

3 个答案: