I am creating a single-page website and I wanted to add a second carousel to show different client logos.
When I added a second carousel, it seems to be greyed out. I tried to see if it was a syntax error by copying the code from the banner section and pasting it into the client section but it is still greyed out.
I also tried making another js variable called slider2 and renamed the div class slider2 but then only 1 image shows, extremely zoomed in and large and then also overlaying the next sections and adding a lot of white space after the next section also.
//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>So the problem is that you're using document.querySelector which only returns the first ".slider" element, instead of document.querySelectorAll to select the all the sliders on that page. Since you have multiple sliders with the same class name you should use querySelectorAll.
Try the code bellow:
//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>