Seguindo os passos do vídeo do curso, quando vou aplicar o media query no carrossel.css, os botões de navegação não aparecem na duplicata da seção.
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
Seguindo os passos do vídeo do curso, quando vou aplicar o media query no carrossel.css, os botões de navegação não aparecem na duplicata da seção.
Oi, Weruska, tudo bem?
O problema acontece devido à estrutura das <div> que envolvem os botões de navegação do carrossel, há um fechamento da tag <div class="swiper-pagination"> nos dois carrosséis e isso faz com que os botões dos dois carrosséis se sobreponham.
Para solucionar esse problema, você pode apagar o fechamento da tag <div>que possui a classe swiper-pagination e está antes das divs que contém os botões. Ficaria assim o código:
<div class="swiper-pagination">
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Deu certo, apareceu os botões nos 2 carrosséis, mas não consigo posicionar mais eles como antes. https://github.com/timesnew-roman/alura_books_duvida.git
Oi, Weruska, como vai?
Desculpe a demora em te responder!
Para que o posicionamento dos botões fique semelhante ao que a instrutura mostra em aula, é necessário mover as tags <div> com classe swiper-button-prev e swiper-button-next para dentro da tag <div> com classe swiper e removê-las de dentro da tag <div>com classe swiper-pagination. Ficaria assim:
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="./assets/ApacheKafka.svg"
alt="Livro sobre Apache Kafka e Spring Boot da Alurabooks"></div>
<div class="swiper-slide"><img src="./assets/Liderança.svg"
alt="Livro sobre liderança em design da Alurabooks"></div>
<div class="swiper-slide"><img src="./assets/Javascript.svg"
alt="Livro sobre Javascript assertivo da Alurabooks"></div>
<div class="swiper-slide"><img src="./assets/Guia Front-end.svg"
alt="Livro Guia front-end da Alurabooks"></div>
<div class="swiper-slide"><img src="./assets/Portugol.svg" alt="Livro Portugol da Alurabooks"></div>
<div class="swiper-slide"><img src="./assets/Acessibilidade.svg"
alt="Livro Acessibilidade da Alurabooks"></div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Além disso, no arquivo "carrossel.css" dentro da media-query com valores de tela mínimos de 1024px, você pode adicionar o seguinte codigo para estilizar o posicionamento dos botões:
.swiper-button-prev, .swiper-button-next {
display: block;
top: 60%;
}
Espero que dê tudo certo. Caso tenha dúvidas, conte com o fórum. Abraços!