(Website made for mobile!) I have a swiper initialized with swiper.js, I made sure to make it as the documentation say, however the library enforces some styling on the swiper and to not let it change my slides’ size and background I made some css attributes important, which is probably the reason for my problem; Not only do the first two slides not appear the slider gets stuck at random points in between the slides. I don’t want to have to change my entire CSS and I’m sure it’s possible to make it work, please help!

how the swiper glitches

Here is the html code for the swiper:

<div class="swiper">
        <div class="swiper-wrapper">
            
                <div class="person swiper-slide">
                    <img src="ioana.JPG"/>
                    <p>Ioana</p>
                    <p class="yellow">President</p>
                </div>

                <div class="person swiper-slide">
                    <img src="iarina.JPG"/>
                    <p>Iarina</p>
                    <p class="yellow">President</p>
                </div>
    
                <div class="person swiper-slide">
                    <img src="irina.JPG"/>
                    <p>Irina</p>
                    <p class="yellow">Chief of IT</p>
                </div>
    
                
                <div class="person swiper-slide">
                    <img src="temin.JPG"/>
                    <p>Temin</p>
                    <p class="yellow">Chief of media</p>
                </div>
    
                <div class="person swiper-slide ">
                    <img src="olivia.JPG"/>
                    <p>Olivia</p>
                    <p class="yellow">Chief of finance</p>
                </div>
            
            </div>
            <div class="swiper-pagination"></div>
        </div>

here is the styling i used:

.swiper {
    width: 100%;
    height: auto;
    border-radius: 10px;
    
}

.swiper-wrapper {
    justify-content: center;
}

.person {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    position: relative !important; /* Ensure the pseudo-element is positioned relative to this element */
    padding: 2rem !important ;
    width: auto !important ;
    height: auto !important ;
    justify-content: center;
    margin-right:1rem;
}


.person::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0!important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(5px) !important;/* The semi-transparent white background */
    border-radius: 10px !important; /* Optional: to match your design */
    box-shadow: 0 10px 15px rgb(0 0 0 / 20%)!important; /* Optional: shadow effect */
    z-index: -1!important; /* Ensure the pseudo-element is behind the .person content */
}