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

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
11
respostas

setas duplicadas swiper

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Selecionando Media Queries e atividade Variações na página

por caio lisboa dos santos
| 26.6k xp | 17 posts
 <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="images/Acessibilidade.svg" alt="Guia de Acessibilidade na web"></div>
          <div class="swiper-slide"><img src="images/Guia Front-end.svg" alt="Guia de Front-end"></div>
          <div class="swiper-slide"><img src="images/Portugol.svg" alt="lógica de Programação com Portugol"></div>
          <div class="swiper-slide"><img src="images/Nodejs.svg" alt="Livro de Node.js"></div>
          <div class="swiper-slide"> <img src="images/ReactNative.svg" alt="ReactNative"></div>
          <div class="swiper-slide"><img src="images/Gestão2.svg" alt="Gestão de produtos"></div>
          
      </div>
    

      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>````
    
    
    
    carrosel.css:
    @media screen and (min-width: 1024px) {
    .carrosel__titulo{
        font-size: 26px;
    }
    .swiper-pagination{
        margin: 2em 0 3em 0;
    }
    .swiper{
        width:60%;
    }
    
    .swiper-button-prev, 
    .swiper-button-next{
    display: block;
    top:40%;
}
}````
11 respostas
por Mike de Sousa
| 4399.6k xp | 8953 posts
Alura Scuba Team Analista de Suporte Educacional

Olá, Caio! Como vai?

Testei o seu código e não notei problemas específicos com setas duplicadas. No entanto, percebi que as setas estão posicionadas com 40% no top, enquanto a instrutora no curso utiliza 60%, o que pode estar causando uma diferença visual em relação ao esperado.

Para que eu possa te ajudar melhor, você poderia compartilhar o código completo do seu arquivo HTML e também do carrossel.css? Assim, consigo analisar todos os detalhes e identificar se há algo mais que possa estar impactando a exibição do Swiper.

Se possível, seria ótimo também se você pudesse enviar uma imagem do problema para termos uma visão mais clara da situação.

Aguardo o retorno para seguirmos com a análise!

Fico no aguardo e à disposição
por caio lisboa dos santos
| 26.6k xp | 17 posts

OBS: tive que escrever separado algumas partes pq nao da pra colocar tudo aqui, se puder me ajudar seria de grande ajuda

.carrosel__titulo{
color: var(--laranja);
text-align: center;
background-color: var(--branco);
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__descrição{
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em;

}
.card__botões{
    display: flex;
    justify-content: space-between;
}
.botões{
    display: flex;
}
.card{
    background: var(--branco);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin: 1em;
    padding: 1em;
}
.descrição__titulo{
    color: var(--laranja);
    font-weight: 700;
}
.descrição__titulo-livro{
    color: var(--azul);
    font-size: 18px;
    font-weight: 700;
    margin: 0.5em 0;
}
.descrição__texto{
    font-size: 14px;
}
.botões__item{
    margin: 0 0.5em;
}
.botões__ancora{
    background-color: var(--laranja);
    padding: 1em 1.7em;
    color: var(--branco);
    font-weight: 700;
    text-decoration: none;
}
@media screen and (min-width: 1024px) {
    .carrosel__titulo{
        font-size: 26px;
    }
    .swiper-pagination{
        margin: 2em 0 3em 0;
    }
    .swiper{
        width:60%;
    }
    
    .swiper-button-prev, 
    .swiper-button-next{
    display: block;
    top:40%;
}
}
por caio lisboa dos santos
| 26.6k xp | 17 posts
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>Alurabooks</title>
    <link rel="stylesheet" href="reset.css">
    <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=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
</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__titulo"><a href="#" class="Lista-menu__link">Programação</a>
            </li>
            <li class="Lista-menu__titulo"><a href="#" class="Lista-menu__link">Front-end</a>
            </li>
            <li class="Lista-menu__titulo"><a href="#" class="Lista-menu__link">Infraestrutura</a>
            </li>
            <li class="Lista-menu__titulo"><a href="#" class="Lista-menu__link">Business</a>
            </li>
            <li class="Lista-menu__titulo"><a href="#" class="Lista-menu__link">DESIGN E UX</a>
            </li>
      </ul>
           <a href="#"><img src="images/Logo.svg" alt="Logo Alurabooks" class="container__imagem"></a>
           <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>
      </div>
           
           <ul class="opções">
           <input type="checkbox" id="opções__menu" class="opções__botão"> 
           <label for="opções__menu">
            <li class="opções__item">Categorias</li>
      </label>
      <ul class="Lista-menu">
            <li class="Lista-menu__titulo"><a href="#" class="Lista-menu__link">Programação</a>
            </li>
            <li class="Lista-menu__titulo"><a href="#" class="Lista-menu__link">Front-end</a>
            </li>
            <li class="Lista-menu__titulo"><a href="#" class="Lista-menu__link">Infraestrutura</a>
            </li>
            <li class="Lista-menu__titulo"><a href="#" class="Lista-menu__link">Business</a>
            </li>
            <li class="Lista-menu__titulo"><a href="#" class="Lista-menu__link">DESIGN E UX</a>
            </li>
      </ul>
            <li class="opções__item"><a href="#" class="opções__link"></a>Favoritos</li>
            <li class="opções__item"><a href="#" class="opções__link"></a>Minha estante</li>
       </ul>

      <div class="container">
            <a href="#"><img src="images/Favoritos.svg" alt="Meus favoritos" class="container__imagem container__imagem-transparente"></a>
            <a href="#"><img src="images/Usuario.svg" alt="Meu perfil" class="container__imagem"></a>
            <a href="#"><img src="images/Compras.svg" alt="Lista de Compras" 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 oque precisa para seu desenvolvimento!</p>
            <input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?"> 
      </section>
      <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="images/Acessibilidade.svg" alt="Guia de Acessibilidade na web"></div>
          <div class="swiper-slide"><img src="images/Guia Front-end.svg" alt="Guia de Front-end"></div>
          <div class="swiper-slide"><img src="images/Portugol.svg" alt="lógica de Programação com Portugol"></div>
          <div class="swiper-slide"><img src="images/Nodejs.svg" alt="Livro de Node.js"></div>
          <div class="swiper-slide"> <img src="images/ReactNative.svg" alt="ReactNative"></div>
          <div class="swiper-slide"><img src="images/Gestão2.svg" alt="Gestão de produtos"></div>
          
      </div>
    

      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
por caio lisboa dos santos
| 26.6k xp | 17 posts
<div class="card">
            <!-- primeira linha -->
            <div class="card__descrição">
                  <!-- primeira coluna -->
                  <div class="descrição">
                        <h3 class="descrição__titulo">Talvez você também se interesse Por...</h3>
                        <h2 class="descrição__titulo-livro">Angular 11 e Firebase</h2>
                        <p class="dexcrição__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
                  </div>
                  <!-- segunda coluna -->
                  <img src="images/Angular.svg" class="descrição__imagem"> 
            </div>
            <!-- 2 linha -->
             <div class="card__botões">
                  <!-- primeira coluna -->
                  <ul class="botões">
                        <li class="botões__item"><img src="images/Favoritos.svg" alt="Favoritos"></li>
                        <li class="botões__item"><img src="images/Compras.svg" alt="Adicionar no carrinho de Compras"></li>
                  </ul>
                  <!-- 2 coluna -->
                   <a href="#" class="botões__ancora">saiba mais</a>
             </div>
      </div>

  

      </section>
      <section class="carrosel">
            <h2 class="carrosel__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="images/Liderança.svg" alt="Liderança e gestão"></div>
          <div class="swiper-slide"><img src="images/Guia Front-end.svg" alt="Guia de Front-end"></div>
          <div class="swiper-slide"><img src="images/Portugol.svg" alt="lógica de Programação com Portugol"></div>
          <div class="swiper-slide"><img src="images/angular11livro.svg" alt="Angular 11 e fire base"></div>
          <div class="swiper-slide"><img src="images/Javascript.svg" alt="Javascript assertivo"></div>
          <div class="swiper-slide"><img src="images/Acessibilidade.svg" alt="Boas praticas de Acessibilidade"></div>
          
          
      </div>
      <div class="card">
            <!-- primeira linha -->
            <div class="card__descrição">
                  <!-- primeira coluna -->
                  <div class="descrição">
                        <img src="images/Estrelinhas.svg" alt="avaliação de 5 estrelas">
                        <h3 class="descrição__titulo">Autora do mês</h3>
                        <h2 class="descrição__titulo-livro">Juliana Agarikov</h2>
                        <p class="dexcrição__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End. </p>
                  </div>
                  <!-- segunda coluna -->
                  <img src="images/Perfil-escritora 1.svg" class="descrição__imagem"> 
            </div>
            <!-- 2 linha -->
             <div class="card__botões">
                  <!-- primeira coluna -->
                  <ul class="botões">
                        <li class="botões__item"><img src="images/Favoritos.svg" alt="Favoritos"></li>
                        <li class="botões__item"><img src="images/Compras.svg" alt="Adicionar no carrinho de Compras"></li>
                  </ul>
                  <!-- 2 coluna -->
                   <a href="#" class="botões__ancora">saiba mais</a>
             </div>
      </div>
      </section>
      <section class="tópicos">
       <h2 class="tópicos__titulo">TÓPICOS VISITADOS RECENTEMENTE</h2>
       <ul class="tópicos__lista">
            <li class="tópicos__item">
            <a href="#" class="tópicos__link">Android</a>
            </li>
            <li class="tópicos__item">
            <a href="#" class="tópicos__link">Marketing digital</a>
            </li>
            <li class="tópicos__item">
            <a href="#" class="tópicos__link">Agile</a>
            </li>
            <li class="tópicos__item">
            <a href="#" class="tópicos__link">Startups</a>
            </li>
            <li class="tópicos__item">
            <a href="#" class="tópicos__link">HTML e CSS</a>
            </li>
            <li class="tópicos__item">
            <a href="#" class="tópicos__link">Python</a>
            </li>
            <li class="tópicos__item">
            <a href="#" class="tópicos__link">OO</a>
            </li> 
            <li class="tópicos__item">
                  <a href="#" class="tópicos__link">JAVA</a>
                  </li>     
      
            
       </ul>
      </section>
por caio lisboa dos santos
| 26.6k xp | 17 posts
<section class="contato">
            <h2 class="contato__titulo">Fique por dentro das novidades!</h2>
            <p class="contato__texto">Atualizações de e-books, novos livros, promoções e outros.</p>
            <input type="email" placeholder="cadastre seu e-mail" class="contato__email">
      </section>
      <hr />
      <footer class="rodape">
            <h2 class="rodape__titulo">Grupo Alura</h2>
      </footer>
    

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

      
      <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
      <script>
            const swiper = new Swiper('.swiper', {
  spaceBetween: 10,
  slidesPerView: 3,
  pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
});
</script>
</body>

</html>
por caio lisboa dos santos
| 26.6k xp | 17 posts

é assim que está as setas

por Mike de Sousa
| 4399.6k xp | 8953 posts
Alura Scuba Team Analista de Suporte Educacional

Oi, Caio.

O que acontece é que há divs extras referentes as setas logo abaixo do <footer>, nesse trecho:

<footer class="rodape">
      <h2 class="rodape__titulo">Grupo Alura</h2>
</footer>


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

Como elas estão fora da <div> do swiper, elas acabam indo parar acima das outras, e também parece que não há uma tag de fechamento para a <div> referente ao swiper. Corrigindo ambas as situações, seu projeto deve ficar conforme o apresentado no curso, mas se ainda precisar de ajuda, não hesite em me chamar!

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado
por caio lisboa dos santos
| 26.6k xp | 17 posts

mano me ajudou muito e ja resolvi porem agora, eu prosegui com a aula eo style não esta sendo aplicado na segunda parte igual a da instrutora, ela disse que por ter as mesmas classes seria aplicado mas no meu caso não esta sendo

por Mike de Sousa
| 4399.6k xp | 8953 posts
Alura Scuba Team Analista de Suporte Educacional

Oi, Caio.

Você poderia subir o seu código em um repositório no GitHub? Assim consigo analisar tudo com mais clareza e te ajudar de forma mais precisa.

Fico no aguardo e à disposição
por caio lisboa dos santos
| 26.6k xp | 17 posts

mano foi mal pela demora eu tive que resolver umas coisas ontem ja publiquei la no git quiser dar uma olhada

https://github.com/RAYDEPRESSAO/alura-books

solução!
por Mike de Sousa
| 4399.6k xp | 8953 posts
Alura Scuba Team Analista de Suporte Educacional

Olá, Caio.

Eu notei que a primeira <div class="card"> estava diferente do projeto, isso está acontecendo por que a <div> referente ao swiper, não foi fechada corretamente. E isso fazia o tamanho ficar desregulado. E também faltam as <div> da navegação no segundo carrossel. Faça o seguinte para corrigir:

1 - Na linha 98, adicione uma tag de fechamento de div, assim: </div>

2 - Na linha 142, adicione as divs referentes aos botões de navegação do swiper:


<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

3 - No arquivo carrosel.css, ajuste o tamanho do card:

.card {
    width: 40%; // A instrutora usa 40%, no seu código está 70%
    margin: 2em auto;
}

Isso deve ser o suficiente para corrigir o problema, mas se ainda precisar de ajuda, não hesite em me chamar!

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

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

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA