Vi que algumas partes do carrossel ficaram um pouco diferentes do projeto no Figma e fui ler a documentação do SwiperJS, fiz algumas pesquisas no stackoverflow e consegui chegar num resultado mais próximo que gostaria de compartilhar.
O CSS completo do carrossel ficou assim:
.carrossel__titulo {
color: var(--laranja);
background-color: var(--branco);
text-align: center;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
padding: 1.3em 0 0.6em 0;
}
.swiper-slide img {
width: 100%;
}
.swiper-button-prev,
.swiper-button-next {
display: none;
}
.swiper-pagination {
position: initial;
margin: 0.5em 0;
}
.swiper-pagination-bullet-active {
background-color: var(--azul);
}
@media screen and (min-width: 1024px) {
.carrossel__titulo {
font-size: 26px;
}
.swiper-pagination {
margin: 2em 0 3em 0;
}
.swiper {
position: relative;
width: 60%;
}
.swiper-button-prev,
.swiper-button-next {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
background-color: var(--azul);
display: block;
top: 61%;
cursor: pointer;
color: var(--branco);
background-position: center;
padding: 8px 16px;
border-radius: 100%;
background-repeat: no-repeat;
}
.swiper-button-prev {
background-image: url("/img/setaesquerda.svg");
}
.swiper-button-next {
background-image: url("/img/setadireita.svg");
}
.swiper-button-next::after,
.swiper-button-prev::after {
content: "";
display: none;
}
}
Alterei a cor da bolinha da página ativa e o estilo das setas.
Não cosegui encontrar uma forma de reduzir o tamanho das bolinhas com as setas.
O espaçamento entre as setas eu encontrei uma forma de aumentar, mas elas não apareciam mais quando saiam do container do carrossel, então deixei assim mesmo.
Também notei que no figma as capas laterais não aparecem completamente, apenas a que está no meio, mas não consegui replicar, também. Se alguém souber como fazer o ajuste de alguma forma estou aceitando dicas... haha