0
respostas

Desafio AluraBooks - Problemas no segundo carrossel

Mais vendidos

    <!-- 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="" alt="Livro sobre liderança em design da alura books"></div>
        <div class="swiper-slide"><img src="" alt="Livro sobre javascript assertivo da alura books"></div>
        <div class="swiper-slide"><img src="" alt="Livro Guia front end"></div>
        <div class="swiper-slide"><img src="" alt="Livro sobre portugol"></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__descricao">
            <!-- 1º coluna -->
            <div class="descricao">
                <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
                <h3 class="descricao__titulo">Autora do Mês</h3>
                <h2 class="descricao__titulo-livro">Juliana Agarikov</h2>
                <p class="descricao__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.
                </p>
            </div>
            <!-- 2º coluna -->
            <img src="img/Juliana.svg" class="descricao__imagem">
        </div>

        <!-- 2º linha -->
        <div class="card__botoes">
            <!-- 1º coluna -->
            <ul class="botoes">
                <li class="botoes__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
                <li class="botoes__item"><img src="img/Compras.svg" alt="Adicionar no carrinho de compras"></li>
            </ul>
            <!-- 2º coluna -->
            <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>
    </div>
</section>
***************************

.swiper-slide img {
width: 100%;

}

.swiper-button-prev , .swiper-button-next { display: none; }

.swiper-pagination { position: initial; margin: 0.5em 0; } Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade