Question

我正在为我的应用程序使用materialize css，我使用materialize v0.97.0 当我尝试使用滑块时，它总是显示灰色背景，我也初始化了滑块（）。

这是我的标记

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，您的代码就可以了。打开滑块所在的页面，右键单击灰色块并选择查看图像。如果它没有显示它应该显示的图像，那么问题在于您的图像源。尝试使用网络上的源图像。如果它在单击 - 查看图像时显示图像，则问题在于javascript的初始化。检查您的网页是否加载了正确的javascript文件。

Answer 2

在JS中，我编写了以下代码并且它有效。

$(document).ready(function () {
    $('.slider').slider({full_width: true});
});

Answer 3

您需要在javascript中实际设置转换时间才能使其正常工作

在jQuery插件导入后放置

    <script type="text/javascript">
       $(document).ready(function() {
       $('.slider').slider({
          full_width: false,
          interval: 5000,
          transition: 800,
          });
       });
    </script>

Answer 4

JavaScript中的任何错误都会阻止让滑块显示，因此在刷新页面并解决它们时请检查控制台，你会没事的。）

Answer 5

我最好的猜测是标签的来源指向错误的路径。

只是尝试使用工作图像路径的代码，它就像一个魅力。

请检查您的源路径是否指向正确的位置。出于测试目的，您应尝试将源更改为以下内容：

SRC = “https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png”

Answer 6

＆＃13;

$(document).ready(function () {
       $('.slider').slider({full_width: true});
   });

＆＃13;

 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">

 <div class="slider">
            <ul class="slides">
                <li>
                    <img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
                    <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>
                <li>
                    <img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
                    <div class="caption left-align">
                        <h3>Left Aligned Caption</h3>
                        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
                    </div>
                </li>
            </ul>
        </div>

＆＃13;

Answer 7

只需使用此课程透明 <ul class="slides transparent" style="height: 400px;">

具体化css滑块显示灰色背景

7 个答案: