Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] Problemas com o segundo carrossel

O carrossel da parte dois não esta aparecendo. segue o codigo abaixo:

<section class="carrossel">
    <h2 class="carrossel__titulo">Mais Vendidos</h2>
    <!-- Slider main container -->
    <div class="swiper">

        <div class="swiper-pagination"></div>


       
        
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre Apache Kafka e Spring Boot da Alura Books"></div>
                <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre liderança em design da Alura Books"></div>
                <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre JavaScript assertivo da Alura Books"></div>
                <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro Guia Front End"></div>
                <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre Portugol"></div>
                <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre acessibilidade"></div>
            </div>

           
            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas

Olá, Gabriel! Tudo bem?

Observei o trecho de código que disponibilizou e não notei nenhuma diferença se comparado ao da instrutora. Seria de grande utilizade se pudesse compartilhar seu arquivo HTML completo, assim podemos verificar todas as importações e o resto do código. Também me ocorreu a possibilidade de você ter esquecido do fechamento da <section> após o bloco de autora do mês. O código funcional desse trecho seria esse abaixo:

 <section class="carrossel">
        <h2 class="carrossel__titulo">Mais vendidos</h2>
        <!-- Slider main container -->
        <div class="swiper">
            <!-- Additional required wrapper -->
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="img/ApacheKafka.svg"
                        alt="Livro sobre apache kafka e spring boot da alura books"></div>
                <div class="swiper-slide"><img src="img/Liderança.svg"
                        alt="Livro sobre liderança em design da alura books"></div>
                <div class="swiper-slide"><img src="img/Javascript.svg"
                        alt="Livro sobre javascript assertivo da alurabooks"></div>
                <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro Guia front end"></div>
                <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre portugol"></div>
                <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="livro sobre acessibilidade"></div>
            </div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

        <div class="card">
            <!-- 1º linha -->
            <div class="card__descrição">
                <!-- 1º coluna -->
                <div class="descrição">
                    <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
                    <h3 class="descrição__titulo">Autora do Mês</h3>
                    <h2 class="descrição__titulo-livro">Juliana Agarikov</h2>
                    <p class="descrição__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.
                    </p>
                </div>
                <!-- 2º coluna -->
                <img src="img/Escritora.svg" class="descrição__imagem">
            </div>

            <!-- 2º linha -->
            <div class="card__botões">
                <!-- 1º coluna -->
                <ul class="botões">
                    <li class="botões__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
                    <li class="botões__item"><img src="img/Compras.svg" alt="Adicionar no carrinho de compras"></li>
                </ul>
                <!-- 2º coluna -->
                <a href="#" class="botões__ancora">Saiba mais</a>
            </div>
        </div>
    </section> <!-- verifique se fechou aqui -->

Confira se seu código está de acordo e caso não encontre discordâncias recomendo que mande o HTML completo de seu projeto e se possível, anexe o projeto completo, no GitHub ou até mesmo pelo link do Drive para que possamos entender melhor e lhe dar um retorno assertivo.

Fico no aguardo e à disposição! Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Boa tarde !

segue link do GitHub : https://github.com/GabrielGambeta/alura-books

solução!

Oi Gabriel! Muito obrigada por retornar com o projeto completo!

O que houve foi que você estava criando aquele trecho de script responsável por fazer o carrossel funcionar antes do carrossel da parte dois. Por isso o script não estava sendo aplicado a ele. Para resolver, basta mover o script para baixo, antes da tag de fechamento do body. Segue o código corrigido nesse link. Coloquei no drive pois aqui não caberia, mas você consegue ver e copiar tranquilamente.

Espero que tenha te ajudado. Conte com o apoio do Fórum em sua jornada :)

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Fiz a correção do código e funcionou, muito obrigado!