見出し画像

Swiper.jsの基本的に使い方

原龍我

以下が公式サイト
公式サイト：https://swiperjs.com/
資源：https://unpkg.com/browse/swiper@7.0.2

まずは、CDNでライブラリを読み込むかもしくは、資源をダウンロードしてローカルで設置する。

下記は<head></head>タグ内に設置する。
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

下記は</body>の上に設置する。
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

以下がベースとなるHTMLのコード。

<div class="swiper">
  <!-- 必要に応じたwrapper -->
  <div class="swiper-wrapper">
    <!-- スライド -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

CSSファイルに下記を記載する。

.swiper--wrapper {
  /* wrapperのサイズを調整できる。 */
  width: 100%;
  height: 300px;
}

これで実装してみよう。


この記事が気に入ったらサポートをしてみませんか？