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

[Bug] Alguns problemas no Projeto Alura Books

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

por Estudante
| 84.7k xp | 4 posts

Olá, procurei no fórum, mas não encontrei resposta para meus problemas. I - Meu primeiro problema é quanto a imagem do menu-hambúrguer. Caso coloque ele com um width e um height de 24px, ele fica desalinhado conforme a imagem. resolvei colocando 40px.(se colocar só o width de 40px já resolve). Insira aqui a descrição dessa imagem para ajudar na acessibilidadeO código CSS: .cabecalho__menu--hamburguer {

width: 40px;
height:24px;
background-image: url(../img/Menu.svg);
background-repeat: no-repeat;
background-position: center;
display: inline-block;

}

E o código html até o a ul:

  • II - O segundo problema é no carrossel, os botões de voltar e avançar ficam fora de lugar e não funcionam. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

    O código css, se mudar para 70 % de top, já fica mais ao centro, todavia ainda ficam nos cantos e não próximo ao carrossel conforme o mostrado pela instrutora. .swiper-button-next,.swiper-button-prev { display: block; top: 60%; } Não sei se faltou algo no javascript para os botões funcionarem, mas segue o que adicionei de javascript. Já revisei e não consegui identificar o erro. Não sei se pode ser em outra parte do código, revisei essa parte toda e não identifiquei. Eu tive que fazer pequenas alterações também. Por exemplo, tive que colocar um padding no .cabecalho__menu--hamburguer quando clicar no menu preencher o fundo e ainda assim não fica total o preenchimento. Obrigado!

5 respostas
por Estudante
| 84.7k xp | 4 posts

O script não fio.

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

O projeto no github
https://braun1983.github.io/alurabook/
por Lorena Garcia
| 10561.4k xp | 15690 posts
Alura Scuba Team

Oi estudante, tudo bem?

Desculpe a demora em te retornar.

Para te ajudar melhor, você poderia mandar seu código completo aqui? Você pode usar a ferramenta de inserir bloco de código </>.

Porque o link do seu projeto do github não abriu aqui :(

Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.

Um abraço e bons estudos.

por Estudante
| 84.7k xp | 4 posts

O código ficou muito grande para postar aqui. Teria que dividi-lo em várias partes e acho que isso atrapalharia a leitura. Eu havia mudado a visibilidade do repositório no github para privado, agora está público novamente. https://github.com/braun1983/Alura/tree/main/AluraBook

solução!
por Lorena Garcia
| 10561.4k xp | 15690 posts
Alura Scuba Team

Oi!

Então o que estava acontecendo é que você colocou as divs do swiper fora da div com a class swiper, então elas estavam ficando fora do lugar. 

<div class="carrossel__container">
            <!-- Slider main container -->
            <div class="swiper">
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="assets/img/ApacheKafka.svg"
                            alt="Livro sobre apache kafka e spring boot da alura books"></div>
                    <div class="swiper-slide"><img src="assets/img/Liderança.svg"
                            alt="Livro sobre liderança da alura books"></div>

                    <div class="swiper-slide"><img src="assets/img/Javascript.svg"
                            alt="Livro sobre javascript assertivo da alura books"></div>
                    <div class="swiper-slide"><img src="assets/img/Guia Front-end.svg"
                            alt="Livro Guia front end alura books">
                    </div>
                    <div class="swiper-slide"><img src="assets/img/Portugol.svg"
                            alt="Livro sobre Portugol da alura books">
                    </div>
                    <div class="swiper-slide"><img src="assets/img/Acessibilidade.svg"
                            alt="Livro sobre Acessibilidade da alura books"></div>
                </div>

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

Precisa corrigir nas duas.

<div class="swiper-pagination"></div>
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="assets/img/Javascript.svg"
                        alt="Livro sobre javascript assertivo da alura books"></div>
                <div class="swiper-slide"><img src="assets/img/ApacheKafka.svg"
                        alt="Livro sobre apache kafka e spring boot da alura books"></div>
                <div class="swiper-slide"><img src="assets/img/Liderança.svg"
                        alt="Livro sobre liderança da alura books">
                </div>

                <div class="swiper-slide"><img src="assets/img/Guia Front-end.svg"
                        alt="Livro Guia front end alura books">
                </div>
                <div class="swiper-slide"><img src="assets/img/Portugol.svg"
                        alt="Livro sobre Portugol da alura books">
                </div>
                <div class="swiper-slide"><img src="assets/img/Acessibilidade.svg"
                        alt="Livro sobre Acessibilidade da alura books"></div>
            </div>
            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

Ficando assim:

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

E se você quiser que as setas funcionem quando você clicar nelas, basta adicionar a parte de navigation no script, ficando assim:

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            slidesPerView: 3,
            spaceBetween: 10,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>

Espero que te ajude!

Um abraço e bons estudos.

por Estudante
| 84.7k xp | 4 posts

show. Obrigado.