A imagem foi obtida por meio do código:
.swiper-button-prev,
.swiper-button-next {
display: block;
top: 60%;}
Eu gostaria de manter as setas (prev e next) fora da área das imagens. Como devo proceder? O "top 60%" é em relação a quê?
A imagem foi obtida por meio do código:
.swiper-button-prev,
.swiper-button-next {
display: block;
top: 60%;}
Eu gostaria de manter as setas (prev e next) fora da área das imagens. Como devo proceder? O "top 60%" é em relação a quê?
Olá, Professor Miranda! Tudo bem com você?
Para manter as setas fora da área das imagens, você pode ajustar a posição delas usando as propriedades CSS left, right, ou transform. O valor top: 60% está posicionando as setas 60% do caminho a partir do topo do contêiner pai.
Deixei um exemplo abaixo:
.swiper-button-prev,
.swiper-button-next {
display: block;
top: 50%; /* Centraliza verticalmente */
transform: translateY(-50%); /* Ajusta para centralizar */
}
.swiper-button-prev {
left: -30px; /* Ajuste a distância para fora da imagem */
}
.swiper-button-next {
right: -30px; /* Ajuste a distância para fora da imagem */
}
Você pode ajustar os valores de left e right conforme necessário para garantir que as setas fiquem fora das imagens, mas ainda visíveis para o usuário.
Espero ter ajudado. Conte com o apoio do fórum em sua jornada :)
Um abraço e bons estudos!