Entrar Ainda não tem acesso?
5
respostas

Problema no "Faça como eu fiz: reutilizando o código"

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Faça como eu fiz: reutilizando código

por Guilherme de Freitas Santos
| 58.5k xp | 95 posts

No que se refere ao desafio proposto pela professora, eu acabo por enfrentar um problema, apesar de revisar o código várias vezes, infelizmente, ao tentar realizar um segundo carrossel "Mais Vendidos", eu acabo por me deparar com uma grande imagem estética de um dos livros (algo que não aconteceu com o primeiro carrossel). Desse modo, o que posso ter feito de errado ?

Código HMTL no index.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="/reset.css">
    <link rel="stylesheet" href="styles/header.css">
    <link rel="stylesheet" href="styles/banner.css">
    <link rel="stylesheet" href="styles/carrosel.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">Design & Ux</a></li>
            </ul>
            <img src="img/Logo.svg" alt="Logo da AluraBooks" class="container__imagem">
        </div>
        <div class="container">
            <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos" class="container__imagem"></a>
            <a href="#"><img src="img/Compras.svg" alt="Meu carrinho de Compras" class="container__imagem"></a>
            <a href="#"><img src="img/Usuário.svg" alt="Meu perfil" class="container__imagem"></a>
        </div>
    </header>

    <section class="banner">
        <h2 class="banner__titulo">Já sabe por onde começar?</h2>
        <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
        <input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
    </section>
5 respostas
por Guilherme de Freitas Santos
| 58.5k xp | 95 posts

Continuação do código HTML em index.html:

<section class="carrosel">
        <h2 class="carrosel__titulo">Novos lançamentos</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> 

    <!--Primeira linha-->
    <div class="card">
        <div class="card__descricao">
            <!--Primeira coluna-->
                <div class="descricao">
                    <h3 class="descricao__titulo">Talvez você também se interesse por...</h3>
                    <h2 class="descricao__titulo-livro">Angular 11 e Firebase</h2>
                    <p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
                </div>
                <!--Segunda coluna-->
                <img src="img/Mask group.svg" class="descricao__imagem">
        </div>

        <!--Segunda linha--> 
        <div class="card__botoes">
            <!--Primeira 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>
            <!--Segunda coluna-->
            <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>
    </div>
  
    </section>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
        });
    </script>
por Guilherme de Freitas Santos
| 58.5k xp | 95 posts

Continuação do código HTML em index.html:

<section class="carrosel">
    <h2 class="carrosel__titulo">Mais vendidos</h2>
        <!-- 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="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>

    <!--Primeira linha-->
    <div class="card">
        <div class="card__descricao">
            <!--Primeira coluna-->
                <div class="descricao">
                    <img src="img/Estrelinhas.svg" class="descricao__imagem" alt="Imagem de cinco estrelas douradas enfileiradas">
                    <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>
                <!--Segunda coluna-->
                <img src="img/Perfil-escritora 1.svg" class="descricao__imagem" alt="Foto da escritora Juliana Agarikov">
        </div>

        <!--Segunda linha--> 
        <div class="card__botoes">
            <!--Primeira 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>
            <!--Segunda coluna-->
            <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>
    </div>
    </section>

</body>
</html>
por Guilherme de Freitas Santos
| 58.5k xp | 95 posts

Código CSS em carrosel.css:

.carrosel__titulo {
    font-family: var(--fonte-principal);
    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 {
    display: none;
}

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

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

.card__descricao {
    display: flex;
    justify-content: space-between;
    font-family: var(--fonte-principal);
    margin-bottom: 0.5em;
}

.card__botoes {
    display: flex;
    justify-content: space-between;
    font-family: var(--fonte-principal);
}

.botoes {
    display: flex;
}

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

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

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

.descricao__texto {
    font-size: 14px;
}

.botoes__item {
    margin: 0 0.5em;
    margin-top: 1.5em;
    margin-right: 0.5em;
}

.botoes__ancora {
    text-decoration: none;
    background-color: var(--laranja);
    padding: 1em 2.2em;
    color: var(--branco);
    font-weight: 700;
    margin-top: 1em;
    text-align: center;
}
por Guilherme de Freitas Santos
| 58.5k xp | 95 posts

Primeiramente, muitíssimo obrigado pela leitura dessa mensagem caro leitor(a). Entretanto, eu já solucionei o meu problema.

por Mike de Sousa
| 1590.5k xp | 2905 posts
Alura Scuba Team Suporte Educacional

Olá, Guilherme, como vai?

Muito bom você ter identificado e resolvido a questão por conta própria. Isso faz parte do processo de aprendizagem e mostra atenção aos detalhes.

Sempre que surgir alguma dúvida ou quiser trocar ideias, o fórum está por aqui para te apoiar.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!