Boa noite, fiz exatamente igual ao video e as bolinhas não subiram nem se mexeram aqui está o projeto https://github.com/GabrielAspCoy/erro
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
Boa noite, fiz exatamente igual ao video e as bolinhas não subiram nem se mexeram aqui está o projeto https://github.com/GabrielAspCoy/erro
Olá, Gabriel. Tudo bem?
Você precisa fazer dois ajustes no código. O primeiro mover a div dos bullets para dentro da div .swiper, dessa forma:
<div class="swiper">
<div class="swiper-page"></div>
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="MetricasAgeis.svg" alt=""></div>
<div class="swiper-slide"><img src="Tuning.svg" alt=""></div>
<div class="swiper-slide"><img src="Angular.svg" alt=""></div>
<div class="swiper-slide"><img src="Acessibilidade.svg" alt=""></div>
<div class="swiper-slide"><img src="Gestão.svg" alt=""></div>
</div>
</div>
A segunda coisa, é que por mais que esteja passando a classe .swiper-page no parâmetro el, não é o suficiente para aplicar o CSS corretamente, mas ao mudar para .swiper-pagination como demonstrado em aula, tudo funciona corretamente. Tente fazer essa alteração na classe do html e no css, dessa forma:
<div class="swiper">
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="MetricasAgeis.svg" alt=""></div>
<div class="swiper-slide"><img src="Tuning.svg" alt=""></div>
<div class="swiper-slide"><img src="Angular.svg" alt=""></div>
<div class="swiper-slide"><img src="Acessibilidade.svg" alt=""></div>
<div class="swiper-slide"><img src="Gestão.svg" alt=""></div>
</div>
</div>
//Código omitido
<script>
const swiper = new Swiper('.swiper', {
spaceBetween: 10,
slidesPerView: 3,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
});
</script>
.swiper-pagination {
position: initial;
}
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)
ainda assim ela continua na parte inferior https://github.com/GabrielAspCoy/erro/blob/main/index.html
Oi, Gabriel.
Dentro da tag <head>, inverte a ordem de importação das folhas de estilo, primeiro você importa a do swiper e depois a do projeto, assim:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="styles.css">
<title>Alura Book</title>
</head>
Assim você sobrescreve os estilos do swiper e consegue estilizar os bullets normalmente.
muito obrigado pela ajuda!