实现显示灰色背景的CSS slider

Question

我正在为我的应用程序使用 materialize css，我使用的是 materialize v0.97.0当我尝试使用 slider 时，它总是显示灰色背景，我还初始化了 slider()。

这是我的标记

HTML

<div class="row">
<div class="col s12">
    <div class="slider">
        <ul class="slides">
            <li>
                <img src="../images/bg3.jpg" alt="slider image"> <!-- random image -->
                <div class="caption center-align">
                    <h3>This is our big Tagline!</h3>
                    <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
                </div>
            </li>
        </ul>
    </div>
</div>

JS

$(document).ready(function () {
    // Plugin initialization
    $('.slider').slider();
})

我也尝试过各种解决方案，但都没有效果

Answer 1

假设您正确初始化了 javascript，您的代码就没问题。打开 slider 所在的页面，右键单击灰色 block 并选择查看图像。如果它没有显示它应该显示的图像，那么问题出在您的图像源上。尝试使用来自网络的源图像。如果它在单击 - 查看图像时显示图像，则问题出在 javascript 的初始化上。检查您的网页是否加载了正确的 javascript 文件。