how to disable/remove/override css property of a CDN

December 1, 2021

i am using swiper.js via CDN…the problem is that in swiper-bundle.min.css CDN file .swiper-button-next, .swiper-button-prev are set to top:50%; like this:-

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
}

I want to set .swiper-button-next, .swiper-button-prev to bottom:11px; i tried doing it in my own css file but CDN’s top:50% is overriding it. And i’ve tried using !important too but nothing happened.

>Solution :

You can select the same class in your project’s main css file and do the styling with !important keyword.

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: unset !important;
    bottom: 11px;
}

Here is fiddle with a simple example. In this Fiddle, I have included bootstrap CDN and overridden the padding of .container class to demonstrate