问题描述
我正在创建一个单页网站，我想添加第二个轮播以显示不同的客户徽标。
当我添加第二个轮播时，它似乎变灰了。我尝试通过从标题部分复制代码并将其粘贴到客户端部分中来查看它是否是语法错误，但仍然显示为灰色。
我还尝试制作另一个名为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>
设置时间 控制面板
错误1：Request method ‘DELETE‘ not supported 错误还原：...