Olá, Antônio. Como vai?
Analisando a sua imagem e o seu código, o problema com as setas do Swiper não estarem centralizando verticalmente (e parecer que o navegador não está aceitando o comando) acontece devido a um detalhe de especificidade do CSS aliado ao comportamento do Swiper.
Dando um zoom na aba Styles do seu inspetor, note que a propriedade top: 70%; que você digitou na sua Media Query está com uma linha riscada por cima. Isso acontece porque a biblioteca do Swiper já possui uma regra padrão interna que define o posicionamento vertical das setas, geralmente usando top: 50%; e combinando com uma transformação. Como a regra padrão deles vem com uma força (especificidade) maior no arquivo minificado da biblioteca, o seu comando acabou sendo ignorado pelo navegador.
Para corrigir isso e fazer com que as setas obedeçam ao seu posicionamento ou fiquem perfeitamente alinhadas, você tem duas abordagens possíveis como boas práticas:
Abordagem 1: Forçar a sobreposição com !important
Como estamos customizando uma biblioteca de terceiros e precisamos que a nossa regra de posicionamento ganhe da regra padrão deles de qualquer maneira, você pode adicionar a instrução !important logo após o valor. Veja o exemplo:
@media screen and (min-width: 1024px) {
.swiper-button-prev,
.swiper-button-next {
display: block;
top: 70% !important;
}
}
Abordagem 2: Deixar a centralização automática perfeita
Se o seu objetivo com o top era tentar centralizar as setas verticalmente em relação ao carrossel e elas acabaram desalinhando, a melhor forma de fazer isso de maneira totalmente responsiva (sem precisar adivinhar uma porcentagem como 70% ou 50%) é zerar o top, definir uma posição inicial estável e utilizar o Flexbox ou o Transform.
Geralmente, o Swiper já centraliza as setas em top: 50%. Se elas parecem tortas, é porque falta compensar a altura da própria seta. A fórmula matemática visual ideal para alinhar o centro da seta com o centro do carrossel é:
@media screen and (min-width: 1024px) {
.swiper-button-prev,
.swiper-button-next {
display: block;
top: 50% !important;
/* Move a seta para cima em metade do seu próprio tamanho, garantindo o centro perfeito */
transform: translateY(-50%) !important;
}
}
Faça o teste aplicando uma dessas opções no seu arquivo CSS e recarregue a página limpando o cache do navegador (pressionando Ctrl + F5). As setas devem se mover imediatamente para a posição correta!
Espero que possa ter lhe ajudado!
