Swiper Sample 09

HTML

<head>
<meta charset="utf-8">
・・・中略・・・
<link rel="stylesheet" href="bootstrap.min.css"><!-- bootstrap の読み込み -->
<link rel="stylesheet" href="swiper.min.css">
</head>
・・・中略・・・
<div class="swiper-container container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="row">
        <div class="col-6 col-lg-4"><img src="images/sample_01.png" alt=""></div>
        <div class="col-6 col-lg-4"><img src="images/sample_02.png" alt=""></div>
        <div class="col-6 col-lg-4"><img src="images/sample_03.png" alt=""></div>
        <div class="col-6 col-lg-4"><img src="images/sample_04.png" alt=""></div>
        <div class="col-6 col-lg-4"><img src="images/sample_05.png" alt=""></div>
        <div class="col-6 col-lg-4"><img src="images/sample_06.png" alt=""></div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row">
        <div class="col-6 col-lg-4"><img src="images/sample_01.png" alt=""></div>
        ・・・中略・・・
        <div class="col-6 col-lg-4"><img src="images/sample_06.png" alt=""></div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row">
        <div class="col-6 col-lg-4"><img src="images/sample_01.png" alt=""></div>
        ・・・中略・・・
        <div class="col-6 col-lg-4"><img src="images/sample_06.png" alt=""></div>
      </div>
    </div>
  </div>
  <!-- end of .swiper-wrapper -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev swiper-button-black"></div>
  <div class="swiper-button-next swiper-button-black"></div>
</div>
<!-- end of .swiper-container.flex -->

CSS

.swiper-slide img {
  width: 100%;
  margin: 10px 0;
}

JavaScript

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

Swiper sample 09