为什么第二个Materialize轮播显示为灰色/不显示？

分类：编程问答

如何解决为什么第二个Materialize轮播显示为灰色/不显示？

我正在创建一个单页网站，我想添加第二个轮播以显示不同的客户徽标。

当我添加第二个轮播时，它似乎变灰了。我尝试通过从标题部分复制代码并将其粘贴到客户端部分中来查看它是否是语法错误，但仍然显示为灰色。

我还尝试制作另一个名为slider2的js变量，并将其重命名为div类slider2，但随后只显示了一张图像，将其放大得非常大，然后又覆盖了下一部分，并在下一部分之后添加了很多空白。 

//sidenav
const sideNav = document.querySelector('.sidenav');
M.Sidenav.init(sideNav,{});

//slider
const slider = document.querySelector('.slider');
M.Slider.init(slider,{
    indicators: false,height: 500,transition: 500,interval: 12000
});
<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://kit.fontawesome.com/9304c4eb40.js" crossorigin="anonymous"></script>

    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js "></script>
</head>

<body>
    <div class="navbar-fixed">
        <nav class="green darken-4">
            <div class="container">
                <div class="nav-wrapper">
                     <a href="" class="brand-logo"> <i class="material-icons large white-text">insert_chart</i></a> 
                    <a href="#" data-target="mobile-nav" class="sidenav-trigger">
                        <i class="material-icons">menu</i>
                    </a>
                    <ul class="right hide-on-med-and-down">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

 
    <ul class="sidenav" id="mobile-nav">
        <li>
            <a href="#home">Home</a>
        </li>
        <li>
            <a href="#clients">About Us</a>
        </li>
        <li>
            <a href="#contact">Contact</a>
        </li>
    </ul>

    <section id="" class="section section-popular">
        <div class="slider">
            <ul class="slides">
                <li>
                    <img src="img/1.jpg" class="overlay">
                    <div class="caption hide-on-small-only center">
                        <h2>TEST</h2>
                        <h5 class="light grey-text text-lighten-3 hide-on-small-only banner-title-center">TEST</h5>
                        <br>
                        <a href="#contact" class="myButton">CONTACT US</a>
                    </div>
                </li>
                <li>
                    <img src="img/2.jpg" class="overlay">
                    <div class="caption hide-on-small-only center">
                        <h2>TEST</h2>
                        <h5 class="light grey-text text-lighten-3 hide-on-small-only banner-title-center">TEST</h5>
                        <br>
                        <a href="#contact" class="myButton">CONTACT US</a>
                    </div>
                </li>
                <li>
                    <img src="img/3.jpg" class="overlay">
                    <div class="caption hide-on-small-only center">
                        <h2>TEST</h2>
                        <h5 class="light grey-text text-lighten-3">TEST</h5>
                        <br>
                        <a href="#contact" class="myButton">CONTACT US</a>
                    </div>
                </li>
            </ul>
        </div>

        <section id="home" class="section section-popular grey lighten-3">
            <div class="section section-icons align-left">
                <div class="container">
                    <hr/>
                    <h5 class="center">Lorem Ipsum is simply dummy text of the printing and </h5>
                    <hr/>
                    <p class="intro-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap</p>
                    <div class="container-box">
                        <p class="style=" font-size: small;>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,but also the leap</p>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="clients" class="section section-popular">
        <div class="container">
            <div class="slider">
                <ul class="slides">
                    <li>
                        <img src="img/4.png">
                    </li>
                    <li>
                        <img src="img/5.png">
                    </li>
                    <li>
                        <img src="img/6.png">
                    </li>
                </ul>
            </div>
        </div>
        <br>
    </section>

</body>

</html>

解决方法

所以问题是您使用的document.querySelector仅返回第一个“ .slider”元素，而不是document.querySelectorAll来选择该页面上的所有滑块。由于您有多个具有相同类名的滑块，因此应使用querySelectorAll。

尝试以下代码： 

//sidenav
const sideNav = document.querySelector('.sidenav');
M.Sidenav.init(sideNav,{});

//slider
const slider = document.querySelectorAll('.slider'); // <- Using querySelectorAll
M.Slider.init(slider,{
    indicators: false,height: 500,transition: 500,interval: 12000
});
<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://kit.fontawesome.com/9304c4eb40.js" crossorigin="anonymous"></script>

    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js "></script>
</head>

<body>
    <div class="navbar-fixed">
        <nav class="green darken-4">
            <div class="container">
                <div class="nav-wrapper">
                     <a href="" class="brand-logo"> <i class="material-icons large white-text">insert_chart</i></a> 
                    <a href="#" data-target="mobile-nav" class="sidenav-trigger">
                        <i class="material-icons">menu</i>
                    </a>
                    <ul class="right hide-on-med-and-down">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

 
    <ul class="sidenav" id="mobile-nav">
        <li>
            <a href="#home">Home</a>
        </li>
        <li>
            <a href="#clients">About Us</a>
        </li>
        <li>
            <a href="#contact">Contact</a>
        </li>
    </ul>

    <section id="" class="section section-popular">
        <div class="slider">
            <ul class="slides">
                <li>
                    <img src="img/1.jpg" class="overlay">
                    <div class="caption hide-on-small-only center">
                        <h2>TEST</h2>
                        <h5 class="light grey-text text-lighten-3 hide-on-small-only banner-title-center">TEST</h5>
                        <br>
                        <a href="#contact" class="myButton">CONTACT US</a>
                    </div>
                </li>
                <li>
                    <img src="img/2.jpg" class="overlay">
                    <div class="caption hide-on-small-only center">
                        <h2>TEST</h2>
                        <h5 class="light grey-text text-lighten-3 hide-on-small-only banner-title-center">TEST</h5>
                        <br>
                        <a href="#contact" class="myButton">CONTACT US</a>
                    </div>
                </li>
                <li>
                    <img src="img/3.jpg" class="overlay">
                    <div class="caption hide-on-small-only center">
                        <h2>TEST</h2>
                        <h5 class="light grey-text text-lighten-3">TEST</h5>
                        <br>
                        <a href="#contact" class="myButton">CONTACT US</a>
                    </div>
                </li>
            </ul>
        </div>

        <section id="home" class="section section-popular grey lighten-3">
            <div class="section section-icons align-left">
                <div class="container">
                    <hr/>
                    <h5 class="center">Lorem Ipsum is simply dummy text of the printing and </h5>
                    <hr/>
                    <p class="intro-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap</p>
                    <div class="container-box">
                        <p class="style=" font-size: small;>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,but also the leap</p>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="clients" class="section section-popular">
        <div class="container">
            <div class="slider">
                <ul class="slides">
                    <li>
                        <img src="img/4.png">
                    </li>
                    <li>
                        <img src="img/5.png">
                    </li>
                    <li>
                        <img src="img/6.png">
                    </li>
                </ul>
            </div>
        </div>
        <br>
    </section>

</body>

</html>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot