为什么第二个 Materialise 旋转木马变灰/不显示？
Why is the second Materialise carousel greyed out / not showing?
我正在创建一个单页网站，我想添加第二个轮播以显示不同的客户徽标。
当我添加第二个轮播时，它似乎是灰色的。我试图通过从横幅部分复制代码并将其粘贴到客户端部分来查看它是否是语法错误，但它仍然是灰色的。
我还尝试创建另一个名为 slider2 的 js 变量并将 div class slider2 重命名，但只有 1 张图像显示，非常放大和大，然后覆盖下一部分并添加很多小白space后节也。
//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, 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>
</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 只有 returns 第一个“.slider”元素，而不是 document.querySelectorAll 到 select 所有该页面上的滑块。由于您有多个具有相同 class 名称的滑块，因此您应该使用 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, 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>
</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>
我正在创建一个单页网站，我想添加第二个轮播以显示不同的客户徽标。
当我添加第二个轮播时，它似乎是灰色的。我试图通过从横幅部分复制代码并将其粘贴到客户端部分来查看它是否是语法错误，但它仍然是灰色的。
我还尝试创建另一个名为 slider2 的 js 变量并将 div class slider2 重命名，但只有 1 张图像显示，非常放大和大，然后覆盖下一部分并添加很多小白space后节也。
//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, 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>
</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 只有 returns 第一个“.slider”元素，而不是 document.querySelectorAll 到 select 所有该页面上的滑块。由于您有多个具有相同 class 名称的滑块，因此您应该使用 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, 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>
</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>