Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Meu carrossel não mostra todas as imagens, não esta seguindo as estilizações do primeiro carrossel

Referente ao curso HTML e CSS: responsividade com mobile-first

por ELIZABETHE CRISTINA DA SILVA
| 51.3k xp | 19 posts
Body Piercing

Ele fica assim, já revisei todo o código e não consigo achar o erro. Não mostra nem os pontinhos acima, e nem as setas. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Aqui está meu código HTML

    <section class="carrossel">
        <h2 class="carrossel__titulo">Mais vendidos</h2>
        <div class="swiper">
            <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/Construct.svg" alt="Livro sobre criação de jogos"></div>
                <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre JavaScript"></div>
                <div class="swiper-slide"><img src="img/Gestão.svg" alt="Livro sobre gestão de produtos"></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-autora">

                <div class="descricao">
                    <img src="img/Estrelinhas.svg" alt="Avaliação 5 Estrelas" class="descricao__estrelas">
                    <h3 class="descricao__titulo">Autora do Mês</h3>
                    <h2 class="descricao__titulo-livro">Juliana Agariko</h2>
                    <p class="descricao__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.</p>
                </div>

                <img src="img/Perfil-escritora 1.svg" alt="foto da autora" class="descricao__imagem">
            </div>

       
            <!--2ª linha-->
            <div class="card__botoes">
            <!--1ª coluna-->
                <ul class="botoes">
                    <li class="botoes__item"><img src="img/Favoritos.svg"></li>
                    <li class="botoes__item"><img src="img/Compras.svg"></li>
                </ul>
                <!--2ª coluna-->
                <a href="#" class="botoes__ancora">Saiba mais</a>
            </div>
        </div>

    </section>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

    
   
 </body>
3 respostas
por ELIZABETHE CRISTINA DA SILVA
| 51.3k xp | 19 posts
Body Piercing

E aqui o carrossel.css

.carrossel__titulo { color:var(--laranja); background-color: var(--branco); text-align: center; text-transform: uppercase; font-size: 18px; font-weight: 700; padding: 1em 0 0.5em 0; }

.swiper-slide img{ width: 100%; }

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

.swiper-pagination { position:initial; margin: 0.5em 0; }

.card__descricao { display: flex; justify-content:space-between; margin-bottom: 0.5em;

}

.card__botoes { display: flex; justify-content:space-between; }

.botoes { display: flex; justify-content: space-between;

}

.card { background: var(--branco); box-shadow: 0px 4px 4px rgba(0, 0, 0.25); border-radius: 10px; margin: 1em; padding:1em;

}

.descricao__titulo { color:var(--laranja); font-weight: 700; }

.descricao__titulo-livro { color: var(--azul); font-size: 18px; font-weight: 700; margin: 0.5em 0; }

.descricao__texto { font-size: 14px; margin-right: 2em; line-height: 1.3em; }

.botoes__item { margin: 0 0.5em; }

.botoes__ancora { background-color: var(--laranja); padding: 1em 2.2em; color: var(--branco); font-weight: 700; text-decoration: none;

}

.carrossel-mais-vendido__titulo { color: var(--laranja); font-size: 18px; font-weight: 700; text-transform: uppercase; text-align: center; background-color: var(--branco); padding: 1em 0 0.5em 0; }

.descricao__estrelas { margin: 0 0 0.5em 0; }

.card__descricao-autora { display: flex; justify-content:space-between; margin-bottom: 0.5em;

}

solução!
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Elizabethe, tudo certo?

Uma possível causa desse comportamento é a falta do script que realiza o espaçamento (spaceBetween) entre os elementos e define a quantidade de slides (slidesPerView) que aparecerão na tela:

<script>
        const swiper = new Swiper('.swiper', {
        spaceBetween: 10,
        slidesPerView: 3,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
        });
        

</script>

Recomendo verificar se ao adicionar esse script ao final da página o problema será resolvido, caso não seja, peço que por gentileza compartilhe o link do seu projeto completo no Github.

Fico à disposição.

Tenha um bom dia e bons estudos.

por ELIZABETHE CRISTINA DA SILVA
| 51.3k xp | 19 posts
Body Piercing

Boa tarde

Coloquei o script mas mesmo assim não funcionou. E esta aparecendo um erro no código também após colocar o script.

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

Estou colocando aqui o projeto no GitHub para analise. Se puder dar uma olhada agradeço muitoo já não sei mais o que fazer kk

https://github.com/Elizabethe-Cristina/aula-alurabooks.git