I’m trying to integrate Swiper.js into my Next.js project, but I’m encountering an issue where the swiper-slide class doesn’t adjust its width and height as expected. I’ve tried various configurations and options, but the slider seems to ignore the styles I apply to it.

Here’s a simplified version of my code:

TSX

<Swiper
          effect={"coverflow"}
          spaceBetween={1}
          grabCursor={true}
          centeredSlides={true}
          loop={true}
          slidesPerView={"auto"}
          coverflowEffect={{
            rotate: 0,
            stretch: 0,
            depth: 100,
            modifier: 2.5,
            slideShadows: false,
          }}
          pagination={{ el: ".swiper-pagination", clickable: true }}
          navigation={{
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
            clickable: true,
          }}
          modules={[EffectCoverflow, Pagination, Navigation]}
          className="swiper_container"
        >
          <SwiperSlide className="swiper-slide">
            <div className=""></div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide">
            <div className=""></div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide">
            <div className=""></div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide">
            <div className=""></div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide">
            <div className=""></div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide">
            <div className=""></div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide">
            {" "}
            <div className=""></div>
          </SwiperSlide>

CSS

 `.container {
     max-width: 100%;
     padding: 0rem 1rem;
    margin: 0 auto;
   }



  .swiper_container {
    height: 35rem;
    padding: 2rem 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
   }

   .swiper-slide {
     width: 10rem !important;
     height: 20rem !important;  
     border: 1px solid blue;
    border-radius: 50px;

   }`

Despite setting explicit width and height styles in the custom-slide class, the slides maintain their default dimensions. I’ve also tried inline styles, but with no success.

Has anyone encountered a similar issue with Swiper.js in a Next.js environment? How can I ensure that the swiper-slide components respect the width and height styles I define?