1
resposta

[Bug] SWIPER JS não carrega as imagens

eu coloco as imagens mas não carregam

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Book</title>
    <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="reset.css">
</head>
<body>
    <header class="cabecalho">
        <div class="container">
            <input type="checkbox" id="menu" class="container_botao">
            <label for="menu">
                <span class="cabecalho_menu_hamburguer container_imagem"></span> 
            </label>
        <ul class="lista_menu">
            <li class="lista_menu_titulo">categorias</li>
            <li class="lista_menu_item"><a href="#" class="lista_menu_link">Programação</a></li>
            <li class="lista_menu_item"><a href="#" class="lista_menu_link">FRONT-END</a></li>
            <li class="lista_menu_item"><a href="#" class="lista_menu_link">Infraestrutura</a></li>
            <li class="lista_menu_item"><a href="#" class="lista_menu_link">Business</a></li>
            <li class="lista_menu_item"><a href="#" class="lista_menu_link">Desing e UX</a></li>
        </ul>
        <img src="img/Logo.svg" alt="logo Alura Books container_imagem">
        </div>
        <div class="container">
            <a href="#"> <img src="img/Favoritos.svg" alt="Meus favoritos" class=""></a>
            <a href="#"> <img src="img/Compras.svg" alt="Carrinho de Compras" class=""></a>
            <a href="#"> <img src="img/Usuário.svg" alt="Meu perfil" class=""></a>
        </div>
    </header>
    <section class="bannerPrincipal">
        <h2 class="bannerTitulo">Ja sabe por onde começar?</h2>
        <p class="bannerTexto">Encontre em nossa estante o que precisa para seu desenvolvimento</p>
        <input type="search" class="bannerBotao" placeholder="Qual será sua proxima leitura?">
    </section>
    <section class="carrossel">
        <h2 class="carrosselTitulo">Últimos Lançamentos</h2>
         <!-- Slider main container -->
            <div class="swiper">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="img/Portugol.svg" alt="imagem do curso de portugol para iniciantes"></div>
                <div class="swiper-slide"><img src="img/Javascript.svg" alt="curso de Javascript da alura book"></div>
                <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="curso Apache kafka"></div>
                <div class="swiper-slide"><img src="img/ReactNative.svg" alt="curso de ReactNative da aluraBook"></div>
                <div class="swiper-slide"><img src="img/Nodejs.svg" alt="curso de nodeJs da aluraBook"></div>
                <div class="swiper-slide"><img src="img/Livros.svg" alt="Curso com livros sobre Programação"></div> 
                ...
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
            
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            
                <!-- If we need scrollbar -->
                <div class="swiper-scrollbar"></div>
            </div>   
    </section>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
                spaceBetween: 100,
            });
    </script>
    
</body>
</html>
1 resposta

Olá João, tudo bem?

Após analisar o seu código, realizei testes e verifiquei que funcionou normalmente, apesar de ter algumas diferenças em relação ao código da aula. As imagens foram carregadas corretamente. Sendo assim, por favor, compartilhe o seu projeto completo comigo, seja através do Google Drive (não esqueça de liberar o link) ou pelo GitHub. Dessa forma, poderei auxiliá-lo de maneira mais eficaz.

Fico no aguardo e à disposição para ajudar!