Entrar Ainda não tem acesso?
Solucionado (ver solução)
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
| 844.3k xp | 1398 posts
Alura Scuba Team 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
| 844.3k xp | 1398 posts
Alura Scuba Team 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
| 844.3k xp | 1398 posts
Alura Scuba Team 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
| 844.3k xp | 1398 posts
Alura Scuba Team 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