2
respostas

[Sugestão] Seta do Swiper mais parecida com a do Figma

Utilizando o CSS, construí setas para o carrossel mais parecidas com as do Figma. Nenhuma alteração foi necessária no html.

setas brancas com fundo azul no carrosel

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;
    }

}
2 respostas

Oi estudante, tudo bem?

Muito obrigada por compartilhar com a gente o seu código, assim pode ajudar outras pessoas estudantes! Ficou muito bom :D

Parabéns por praticar!

Um abraço e bons estudos.

Obrigada! Estava procurando uma solução na documentação do Swiper, mas a sua solução é bem mais prática :)