La imagen que adjunto es lo que se ve en el navegador Chrome. No muestra las imágenes (más de 100) en un Carrusel de Materialize con JQuery. Quiero mostrar más de 100 imágenes.
Estoy comenzando con Html, Jquery y Materialize (Carousel). Quiero mostrar más de 100 imágenes. Que por el momento las tengo en mi ordenador. En el directorio imgCat. En la imagen que adjunto es lo que aparece en el navegador Chrome. (Nota: Es bien complejo enviar la pregunta. Llevo más de 30 minutos tratando de enviar la pregunta y no lo hace. Indicando que debo resolver 1 problema antes de publicar. Que desconozco cuál será ese problema.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel</title>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0
/css/materialize.min.css">
<style>
body
{
margin: 0%;
padding: 0%;
background: #000;
}
h3
{
margin-left: 12px;
background: #dd1d;
color: #000;
font-weight: bold;
text-align: center;
width: 624px;
}
.carousel
{
transform: translateY(-21px);
height: 750px;
perspective: 600px;
}
.carousel .carousel-item
{
width: 400px;
}
.carousel .carousel-item img
{
width: 100px;
}
.carousel .carousel-item h3
{
margin: -5px 0 0;
padding: 10px;
width: 624px;
background: #fff;
color: #000;
box-sizing: border-box;
padding: 10px 5px;
font-weight: bold;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<div class="container section">
<h3>Materialize Carousel</h3>
<div class="row">
<div class="col l12">
<div class="carousel carousel-slider">
<a href="#" class="carousel-item">
<img src="" style="width: auto;" alt="">
<h3>Nombre de la Imagen</h3>
</a>
</div>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
</script>
<script>
$(document).ready(function(){
const imgCats = ['imgCat/']
let output = "";
for(let i = 1; i <= length; i++){
output += "<img src='" + imgCats + i + ".jpg'>";
}
$('.carousel.carousel-slider').carousel(output);
console.log(output);
});
</script>
</body>
</html>