【最新CDN】Swiper.jsのCSSなどが突然きかなくなったときの対処法

Web制作案件でコーディングをしていた時に、つい先日までは正常にCSSがきいていたSwiper.jsのスライドショーが寝て起きたら突然きかなくなっていたので原因を調べてみました。

結論。Swiperのバージョン変更？かなんかで、CDNのコードが少し変更されていたのと、swiperブロックの親要素に指定するクラス名がアップデートされていたのが原因でした！

急に動かくなくなるのほんと心臓に悪いからやめてよね（笑）

以下、最新のCSSとJSのCDN読み込みコードとなります。

swiperのあとに「@7」が追加されてますね。

CSSとJSのCDN

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

あともう一つ大事なことがあります。これまでdivタグに「swiper-container」と指定していたのを「swiper」だけにしましょう。

jsでnewするときも「.swiper-container」ではなく「.swiper」と記載しましょうね。

HTML Layout

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

参考：https://swiperjs.com/get-started