SwiperJs .swiper-slide classına width verdiğim zaman slider bozuluyor

Merhabalar,
Swiperjs ile yapmakta olduğum slider için bir width değeri verdiğim zaman sliderım belirli bir yerden sonra kayboluyor.
Bunu nasıl düzeltebilirim.
Sliderı sağa doğru kaydırdığımızda belirli bir yerden sonrası boşluk oluyor.
Ve ben aynı anda 3 tane sliderın gözükmesini istiyorum.

Yardım edecek kişilere teşekkür ederim.

 <!-- Swiper -->
    <div class="swiper-container mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./img/man.png" alt="slider">
        </div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>


.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  border: 3px solid black;
  border-radius: 20px;
  width: 300px !important;
  box-shadow: 0 6px 18px rgba(214, 214, 214, 0.5);

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}


var swiper = new Swiper(".mySwiper", {
  slidesPerView: 3,
  spaceBetween: 30,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});