es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo deshabilitar/eliminar/sobrescribir una propiedad de CSS de un CDN.

16 Jun, 2023 Programación

Estoy usando swiper.js a través de CDN… el problema es que en el archivo CDN swiper-bundle.min.css, .swiper-button-next, .swiper-button-prev están configurados en top: 50%; así:
css
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 50%;
}

Quiero establecer .swiper-button-next, .swiper-button-prev en bottom: 11px;, intenté hacerlo en mi propio archivo css, pero el top: 50% del CDN lo está anulando. Y he intentado usar !important también, pero no ha sucedido nada.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para anular los ajustes CSS del archivo CDN de swiper-bundle.min.css, debes agregar la declaración !important a tu CSS. Sin embargo, como mencionaste, no funcionó. Esto se debe a que la declaración top: 50%; se establece con !important.

    Para anularla, debes establecer la propiedad bottom con la declaración !important también. Aquí tienes un ejemplo de cómo hacerlo:

    .swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: unset !important; /* anula la propiedad top */
  bottom: 11px !important; /* establece la propiedad bottom */
}

    En el código anterior, agregamos unset !important para anular la declaración top: 50%;. Luego agregamos bottom: 11px !important para establecer la posición bottom deseada.

    Al hacerlo, los elementos .swiper-button-next, .swiper-button-prev se posicionarán en la parte inferior del contenedor de swiper.

Comments are closed.