0

introducir la descripción de la imagen aquí 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>
2
  • Click derecho, inspeccionar elemento, pestaña network, ¿te da algún error 404?
    – fredyfx
    Commented el 13 may. 2020 a las 7:36
  • En el script tienes un bucle con límite un valor length que en el código no se ve cual es o de donde procede. Suponiendo que este valor es correcto, comprueba si poniendo un número bajo como 5 te muestra las imágenes, para ver si el error es en el carrousel en sí o por el número de imágenes.
    – Carmen
    Commented el 13 may. 2020 a las 7:40

1 respuesta 1

0

En el script para añadir las imágenes lo que se está creando es una estructura de html, si lo añades como tal con jQuery muestra las imágenes. En este ejemplo he puesto 5 imágenes, pero he probado con 100 y lo admite sin problema.

Al incluir las imágenes es importante que incluyas la etiqueta con la clase carousel-item para el funcionamiento posterior del carousel, el cual habría que inicializar en el script tras añadir las imágenes.

$(document).ready(function(){
                const imgCats = ['imgCat/']
                let output = "";
                for(let i = 1; i <= 5; i++){
                    //output += "<img src='" + imgCats + i + ".jpg'>";
                    output += "<a href='#' class='carousel-item'><img src='" + imgCats + i + ".jpg'></a>";
                }
                $('.carousel.carousel-slider').html(output);
                console.log(output);
                
                //$('.carousel').carousel();
            });
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;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
        
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
        </script>       
        <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>

4
  • Gracias @Carmen por responder a mi consulta. Carmen, utilice completo tu código, en un nuevo html. Aparecen las 5 imágenes. Pero fijas, y todas a la vez, las 5. No se desplazan en un carrusel. Y con tu código, no aparece el <h3> que indica el Nombre de la Imagen. Gracias nuevamente por su tiempo. Si llego a solucionarlo. Pondré la solución acá.
    – Ace_331
    Commented el 14 may. 2020 a las 2:55
  • Gracias @fredyfx Respecto a si aparece algún error 404. Si. Aparece 404. Gracias por responder a mi consulta. Si llego a encontrar la solución la pondré acá.
    – Ace_331
    Commented el 14 may. 2020 a las 2:58
  • @Ace_331 en la variable output puedes añadir el h3 después de la etiqueta img para cada imagen. Para el carousel funcione hay que descomentar la línea $('.carousel').carousel();, y ya gestionar las opciones disponibles de materialize según el resultado final que quieras.
    – Carmen
    Commented el 14 may. 2020 a las 7:16
  • Gracias @Carmen. Yo tenía una <etiqueta> de más por eso no funcionaba tu respuesta. Pero es la correcta. Funciona perfectamente. Muchas gracias Carmen.
    – Ace_331
    Commented el 19 may. 2020 a las 6:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.