Swiper sample 08

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"> 
      <img src="images/sample_01.png" alt=""> 
      <img src="images/sample_02.png" alt=""> 
      <img src="images/sample_03.png" alt=""> 
      <img src="images/sample_04.png" alt=""> 
      <img src="images/sample_05.png" alt=""> 
      <img src="images/sample_06.png" alt=""> 
    </div>
    <div class="swiper-slide"> 
      <img src="images/sample_01.png" alt=""> 
      ・・・中略・・・
      <img src="images/sample_06.png" alt=""> 
    </div>
    <div class="swiper-slide"> 
      <img src="images/sample_01.png" alt=""> 
      ・・・中略・・・
      <img src="images/sample_06.png" alt=""> 
    </div>
  </div>
  <!-- end of .swiper-wrapper -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<!-- end of .swiper.flex -->

.swiper-slide {
  /* 中央寄せするための設定 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.swiper-slide img {
  width: 100%;
  max-width: 400px; /* 画面幅とこの幅により表示枚数が決まる */
  margin: 10px;
}
.swiper-pagination {
  /* pagination の位置調整 */
  bottom: 30px;
}
.swiper{
  /* pagination の位置調整 */
  padding-bottom: 50px;
}

let swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});