Swiperのスライドが1枚のときは動かさない｜2枚以上だけ動かす方法

<section class="news-slider">
  <!-- Swiperを初期化しなくても、通常のカードとして読める構造にする -->
  <div class="swiper js-news-swiper">
    <!-- CMSから出力したお知らせを、この中に並べる -->
    <div class="swiper-wrapper">
      <article class="swiper-slide news-card">お知らせ1件目</article>
      <article class="swiper-slide news-card">お知らせ2件目</article>
    </div>

    <!-- 複数件のときだけ使う操作UI。1件時はCSSで隠す -->
    <div class="news-slider__controls">
      <button class="swiper-button-prev" type="button" aria-label="前のお知らせへ"></button>
      <div class="swiper-pagination"></div>
      <button class="swiper-button-next" type="button" aria-label="次のお知らせへ"></button>
    </div>
  </div>
</section>

/* 1枚のときだけ付けるis-static。3枚表示と同じカード幅で左寄せにする */
.js-news-swiper.is-static .swiper-wrapper {
  display: flex;
  gap: 16px;
}

.js-news-swiper.is-static .swiper-slide {
  flex: 0 0 calc((100% - 32px) / 3);
  width: calc((100% - 32px) / 3);
}

/* 1枚なら操作する必要がないため、矢印とドットは表示しない */
.js-news-swiper.is-static .news-slider__controls {
  display: none;
}

@media (max-width: 767px) {
  /* スマホでは静的な1枚も横幅いっぱいにする */
  .js-news-swiper.is-static .swiper-slide {
    flex-basis: 100%;
    width: 100%;
  }
}

// ページ内にある対象のSwiperを、1つずつ処理する
document.querySelectorAll('.js-news-swiper').forEach((swiperElement) => {
  // 直下の実データのスライドだけを取得する
  const slides = swiperElement.querySelectorAll(
    ':scope > .swiper-wrapper > .swiper-slide'
  );

  // 1枚以下はSwiperを作らず、通常表示用のクラスだけを付けて終える
  if (slides.length < 2) {
    swiperElement.classList.add('is-static');
    return;
  }

  // 2枚以上のときだけ、ここでSwiperを初期化する
  new Swiper(swiperElement, {
    // PCでは最大3枚を横並びにする
    slidesPerView: 3,
    spaceBetween: 16,

    breakpoints: {
      // スマホでは1枚ずつ見せる
      0: { slidesPerView: 1 },
      // 中間幅では2枚を並べる
      768: { slidesPerView: 2 },
      // PCでは最大3枚を並べる
      1024: { slidesPerView: 3 }
    },

    navigation: {
      // このSwiperの中にある「次へ」ボタンだけを紐付ける
      nextEl: swiperElement.querySelector('.swiper-button-next'),
      // このSwiperの中にある「前へ」ボタンだけを紐付ける
      prevEl: swiperElement.querySelector('.swiper-button-prev')
    },
    pagination: {
      // このSwiperの中にあるドットの出力先を指定する
      el: swiperElement.querySelector('.swiper-pagination'),
      // ドットを押して移動できるようにする
      clickable: true
    }
  });
});

/* 操作UIをカードの下へ並べる */
.news-slider__controls {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

/* 標準のabsolute配置を解除し、矢印アイコンだけを表示する */
.news-slider__controls .swiper-button-prev,
.news-slider__controls .swiper-button-next {
  position: static;
  width: 40px;
  height: 40px;
  margin: 0;
  font-size: 0;
}

/* ドットも通常の配置に戻して、カードと重ならないようにする */
.news-slider__controls .swiper-pagination {
  position: static;
  width: auto;
}

new Swiper('.js-product-swiper', {
  // PCでは3枚を同時に見せる
  slidesPerView: 3,

  // 初期化済みSwiperが動けないときだけロックする任意設定
  watchOverflow: true,

  breakpoints: {
    0: { slidesPerView: 1 },
    1024: { slidesPerView: 3 }
  }
});