Boa noite, estou com uma dúvida sobre a biblioteca swiper, de algum modo, algumas estilizações na hora do carrossel não estão funcionando(o carrossel funciona só as posições do navigation e os botões de next e prev continuam lá mesmo com display none), por exemplo o pagination eu tento fazer com que ele fique no ínicio assim como a professora e o projeto no figma, eu fiz as estilizações e o css iguais mas ainda assim sempre continua no mesmo lugar, vou anexar o arquivo html e css Obs: o CSS que estou mandando se refere só a seção do carrossel
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alura Books</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>
<body>
<header class="cabecalho">
<div class="container_itens">
<input type="checkbox" name="interacao" id="clique_menu" class="clique_menu_burguer">
<label for="clique_menu">
<nav class="burguer_menu imagem_header"></nav>
</label>
<ul class="lista_links">
<li class="lista_titulo">CATEGORIAS</li>
<li class="item_lista">PROGRAMACAO</li>
<li class="item_lista">FRONT-END</li>
<li class="item_lista">INFRAESTRUTURA</li>
<li class="item_lista">BUSINESS</li>
<li class="item_lista">DESIGN & UX</li>
</ul>
<img class="imagem_header" src="img/Logo.svg" alt="Logo do Alura books">
</div>
<div class="container_itens">
<a href=""><img class="imagem_header" src="img/Favoritos.svg" alt="Imagem dos favoritos"></a>
<a href=""><img class="imagem_header" src="img/Compras.svg" alt="Imagem da sacola de compras"></a>
<a href=""><img class="imagem_header" src="img/Usuario.svg" alt="Imagem da logo de usuário"></a>
</div>
</header>
<main class="conteudo_principal">
<section class="bunner_pesquisa">
<h2 class="titulo_bunner_pesquisa">Já sabe por onde começar?</h1>
<p class="texto_bunner_pesquisa">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
<input type="search" id="barra_pesquisa" class="form_pesquisa" placeholder="Qual será sua próxima leitura?">
</section>
<section class="carrossel">
<h2 class="titulo_carrossel">ÚLTIMOS LANÇAMENTOS</h2>
<div class="swiper">
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/Portugol.svg" alt=""></div>
<div class="swiper-slide"><img src="img/ApacheKafka.svg" alt=""></div>
<div class="swiper-slide"><img src="img/Javascript.svg" alt=""></div>
<div class="swiper-slide"><img src="img/Liderança.svg" alt=""></div>
<div class="swiper-slide"><img src="img/Construct2.svg" alt=""></div>
...
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</section>
</main>
<footer></footer>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
spaceBetween: 10,
slidesPerView:3,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
});
</script>
</body>
</html>
.titulo_carrossel{
font-family: 'Poppins', sans-serif;
text-align: center;
padding: 1em;
background-color: var(--fundo-secundario);
font-weight: 700;
color: var(--cor-destaque);
}
.swiper-slide img{
width: 100%;
}
.swiper-pagination{
position: initial;
}
.swiper-button-prev, .swiper-button-next{
display: none;
}
Por favor me ajudem!
