Minha bolinhas do carrossel estao duplicadas, segue.
HTML/JS :
<section class="carrosel">
<h2 class="carrossel__titulo">Novos Lancamentos</h2>
<!-- Slider main container -->
<div class="swiper">
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre apache kafka e spring boot da alura books"></div>
<div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre lideranca em design da alura books"></div>
<div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre Javascript assertivo da alura books"></div>
<div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro sobre Front-end da alura books"></div>
<div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre Portugol da alura books"></div>
<div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre acessibilidade na web da alura books"></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
slidesPerView: 3,
spaceBetween: 20,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
}
})
</script>
CSS
.carrossel__titulo {
color: var(--laranja-secundario);
background-color: var(--branco-secundario);
text-align: center;
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: .5em 0;
}
Resultado :