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
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!