Swiper: ¿cómo personalizar los botones de flecha?

Posterior a mirar en diversos repositorios y sitios de internet al terminar nos encontramos con la resolución que te mostramos a continuación.

Solución:

Agregue esto para diseñar las flechas anterior / siguiente:

.swiper-button-prev 
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;


.swiper-button-next 
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;

Donde “4c71ae” es el color que desea usar en HEX.

:root 
    --swiper-theme-color: #000;

Prueba esto en lugar de !important para cambiar de color.

Con la versión actual de SwiperJS (v.5.3.8) puede cambiar el color de las flechas en css sin ningún problema. Solo define el color.

.swiper-button-prev 
    color: red; 


.swiper-button-next 
    color: #000; 

Te mostramos las reseñas y valoraciones de los usuarios

Recuerda que tienes la opción de añadir una estimación acertada .

---

---

Utiliza Nuestro Buscador