Swiperを実装したスライドショーをFlexを使って横並びにする方法

Question

スライドショーを横並びにさせたいです。

Swiperを実装したスライドショーを、flexを使って横並びにしたいのですが、うまくいきません。
原因と対処法を教えてください。
よろしくお願いします。

発生している問題

CSSを適用させていないときは、スライドショーは縦並びで機能するのですが、
CSSを適用させるとスライドショーは機能しなくなり、画像が一枚だけ表示され、もう一つのスライドショー（div class="mySwiper2"）がどこかに消えてしまいます。

該当のソースコード

  <div class="mySwipers">
    <div class="mySwiper1">          
      <div class="swiper-wrapper1">
        <div class="swiper-slide"><img class="image" src="gazou/IMG_4771.jpg"></div>
        <div class="swiper-slide"><img class="image" src="gazou/IMG_4828.jpg"></div>
        <div class="swiper-slide"><img class="image" src="gazou/IMG_4829.jpg"></div>
        <div class="swiper-slide"><img class="image" src="gazou/IMG_4826.jpg"></div>
      </div>
    </div>
    <div class="mySwiper2">
      <div class="swiper-wrapper2">
        <div class="swiper-slide"><img class="image" src="gazou/IMG_4770.jpg"></div>
        <div class="swiper-slide"><img class="image" src="gazou/IMG_4827.jpg"></div>
        <div class="swiper-slide"><img class="image" src="gazou/IMG_4830.jpg"></div>
        <div class="swiper-slide"><img class="image" src="gazou/IMG_4825.jpg"></div>
      </div>
    </div>
  </div>

.mySwipers {
  display: flex;
  flex-direction: row;
}
.image {
  width: 360px;
}

Answer 1

親要素に justify-content: center; を追加、二つのスライドショーの枠(div)のサイズを width: 50vw; 、画像サイズを指定して、解決しました。

.mySwipers {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.Swiper1,.Swiper2 {
  width: 50vw;
}
img {
  object-fit: contain;
  width: 100%
}