Utilizando o CSS, construí setas para o carrossel mais parecidas com as do Figma. Nenhuma alteração foi necessária no html.
Encaminho o código para aproveitamento e sugestões de melhoria:
@media screen and (min-width: 1024px){
.carrossel__titulo{
font-size: 26px;
padding: 2em 0 0.5em 0;
}
.swiper{
width: 60%;
padding-left: 3em;
}
.swiper img{
width: 80%;
}
.swiper-button-prev, .swiper-button-next{
display:block;
top: 60%;
color: transparent;
}
.swiper-button-prev::before{
content:"<";
color: var(--branco);
font-size: 16px;
font-weight: 400;
background: var(--azul-gradiente);
border-radius: 50%;
padding: 20% 40%;
}
.swiper-button-next::before{
content:">";
color: var(--branco);
font-size: 16px;
font-weight: 400;
background: var(--azul-gradiente);
border-radius: 50%;
padding: 20% 40%;
}
.swiper-pagination{
position: initial;
margin: 2em 0 4em 0;
}
}