<div class="content">
    <h2>1個目</h2>
    <!-- swiper 必須・名称変更不可 -->
    <div class="swiper swiper1">
      <!-- swiper-wrapper 必須・名称変更不可 -->
      <div class="swiper-wrapper">
        <!-- swiper-slide 必須・名称変更不可 -->
        <div class="swiper-slide">
          <p>スライド1</p>
        </div>
        <div class="swiper-slide">
          <p>スライド2</p>
        </div>
        <div class="swiper-slide">
          <p>スライド3</p>
        </div>
      </div>
      <!-- ページネーション -->
      <div class="swiper-pagination swiper-pagination1"></div>
      <!-- ナビゲーションボタン -->
      <div class="swiper-button-prev swiper-button-prev1"></div>
      <div class="swiper-button-next swiper-button-next1"></div>
      <!-- スクロールバー -->
      <div class="swiper-scrollbar swiper-scrollbar1"></div>
    </div>

    <h2>2個目</h2>
    <!-- swiper 必須・名称変更不可 -->
    <div class="swiper swiper2">
      <!-- swiper-wrapper 必須・名称変更不可 -->
      <div class="swiper-wrapper">
        <!-- swiper-slide 必須・名称変更不可 -->
        <div class="swiper-slide"><p>スライド1</p></div>
        <div class="swiper-slide"><p>スライド2</p></div>
        <div class="swiper-slide"><p>スライド3</p></div>
      </div>
      <!-- ページネーション -->
      <div class="swiper-pagination swiper-pagination2"></div>
      <!-- ナビゲーションボタン -->
      <div class="swiper-button-prev swiper-button-prev2"></div>
      <div class="swiper-button-next swiper-button-next2"></div>
      <!-- スクロールバー -->
      <div class="swiper-scrollbar swiper-scrollbar2"></div>
    </div>
    
      <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

.content{
  width: 300px;
  margin: 0 auto;
}

.swiper{
  width: 300px;
}

.swiper p{
  height: 200px;
  width: 300px;
  display: grid;
  place-items: center;  text-align: center;
}  

.swiper1 .swiper-slide:nth-of-type(1),
.swiper2 .swiper-slide:nth-of-type(3){
  background-color: #B3B2B2;
}

.swiper1 .swiper-slide:nth-of-type(2),
.swiper2 .swiper-slide:nth-of-type(1){
  background-color: #E04B30;
}

.swiper1 .swiper-slide:nth-of-type(3),
.swiper2 .swiper-slide:nth-of-type(2){
  background-color: #756c6a;
}

const swiper = new Swiper(".swiper1", {
  // ページネーションが必要なら追加
  pagination: {
    el: '.swiper-pagination1',
    clickable: true, // ページネーションをクリック可能
  },
  navigation: {
    nextEl: ".swiper-button-next1",
    prevEl: ".swiper-button-prev1"
  },
  scrollbar: {
    el: ".swiper-scrollbar1"
  }
});

const swiperaa= new Swiper(".swiper2", {
  // ページネーションが必要なら追加
  pagination: {
    el: '.swiper-pagination2',
    clickable: true, // ページネーションをクリック可能にするかどうか
  },
  navigation: {
    nextEl: ".swiper-button-next2",
    prevEl: ".swiper-button-prev2"
  },
  scrollbar: {
    el: ".swiper-scrollbar2"
  }
});