Swiper（スワイパー/スウィパー）で動くリストを作る

お世話になっております。コウヤです。

今回は動くメニューリストをSwiperを使って説明していきたいと思います。正しい読みがスワイパーなのかスウィパーなのかはいろいろなサイトを検索しても両方の言い方しているので、ここではSwiperと英語で書きたいと思います。
作成するものは以下のものを想定しています。（iPhoneで見た場合）

今回はPCでもスマートフォンでも両用できるようにSwiperのメニューリストを作成していきたいと思います。

以下のメニューが自動で左側に無限ループで動かすことを考えます。
【PCで見たとき】

【スマートフォン（iPhone）で見たとき】

Swiperの導入

Swiperについては
https://swiperjs.com/
について説明（英語）しておりますが、まずこちらの記事を参照していただき、ある程度導入方法が分かってからこのサイトを見てみると理解が深まるかもしれません。

ここではメニュー一覧を自動で動かすということについてのみ記載していきたいと思います。

今回作るものは以下のものです。実際にこのカードは10枚あります。

またフォルダ構成は以下のとおりです。

今回、CSSの記述はhtmlファイル内のstyleタグ内で行います。

また、今回この説明をするに当たって、O-DANさんから画像を頂いております。
https://o-dan.net/ja/

カードを作る

まずはカードを10枚作成していきたいと思います。
（このコードの最後にあるコメントアウトしているページネーションについては最後に説明します。）

index.html

    <!--メニュー一覧-->
    <main id="product" class="_bgc">
        <h1 class="product__title">メニュー一覧</h1>
      <div class="swiper">
      <!--Swiperで動かす部分を記載 -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_apple.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>りんご</h2>
                  <p>￥ 150（税込）</p>
                </div>
            </a>
          </div>
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_banana.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>バナナ</h2>
                  <p>￥ 140（税込）</p>
                </div>
            </a>
          </div>
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_blueberry.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>ブルーベリー</h2>
                  <p>￥ 200（税込）</p>
                </div>
            </a>
          </div>
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_cherry.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>さくらんぼ</h2>
                  <p>￥ 210（税込）</p>
                </div>
            </a>
          </div>
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_grape.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>ぶどう</h2>
                  <p>￥ 300（税込）</p>
                </div>
            </a>
          </div>
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_orange.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>みかん</h2>
                  <p>￥ 150（税込）</p>
                </div>
            </a>
          </div>
         <!-- Slides -->
         <div class="swiper-slide">
          <a href="#" class="card">
              <div class="card_img">
                <img src="img/swp_pear.jpg" alt="">
              </div>
              <div class="card_text">
                  <h2>なし</h2>
                <p>￥ 90（税込）</p>
              </div>
          </a>
        </div>
        <!-- Slides -->
        <div class="swiper-slide">
          <a href="#" class="card">
              <div class="card_img">
                <img src="img/swp_pine.jpg" alt="">
              </div>
              <div class="card_text">
                <h2>パイナップル</h2>
                <p>￥ 300（税込）</p>
              </div>
          </a>
        </div>
        <!-- Slides -->
        <div class="swiper-slide">
          <a href="#" class="card">
              <div class="card_img">
                <img src="img/swp_strawberry.jpg" alt="">
              </div>
              <div class="card_text">
                <h2>いちご</h2>
                <p>￥ 100（税込）</p>
              </div>
          </a>
        </div>
        <!-- Slides -->
        <div class="swiper-slide">
          <a href="#" class="card">
              <div class="card_img">
                <img src="img/swp_watermelon.jpg" alt="">
              </div>
              <div class="card_text">
                <h2>西瓜</h2>
                <p>￥ 320（税込）</p>
              </div>
          </a>
        </div> 
 
 
        </div>
        <!-- ページネーションを利用する場合↓ -->
        <!-- <div class="swiper-pagination"></div> -->

        <!-- ナビゲーションボタンを利用する場合↓（2行） -->
        <!-- <div class="swiper-button-prev"></div> -->
        <!-- <div class="swiper-button-next"></div> -->

      </div> 
    </main>

そしてCSSを設定するのですが、 今回はhead内のstyleタグの中に記載 していくことにします。

index.html

    <style>
/*ベース
*********************/
body {
  color: #475950;
  font-family: "Noto Sans JP", sans-serif;
}

a {
  text-decoration: none;
  color: #475950;
}

img {
  height: auto;
  max-width: 100%;
}

.break {
  display: block;
}


/*レイアウト
*********************/

._bgc {
  height: auto;
  background: #dbebc4;
}



/*MAIN(product)
**********************/
.product__title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  padding-top: 30px;
  margin-bottom: 91px;
}

/*swiper*/
      /* 全体のスタイル */
      .swiper-wrapper {
        width: 100%;
        height: 331px;

    }
    .swiper{
      height: 425px;
    }
    /* 全スライド共通スタイル */
    .swiper-slide {
        color: #ffffff;
        width: 264px;
    }
    
    .swiper-slide{
        width: 264px;
        background-color: #fff;
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
        text-align: left;
        position:relative;
      }

      .card_img{
        overflow: hidden;
      }
      .card_img img{
        width: 100%;
        height: 166px;
        object-fit:  cover; 
        transition: 0.3s; 
      }
      .swiper-slide:hover img{
        transform: scale(1.1);
      }
      .swiper-slide .card_text{
        padding:15px;
      }
      .swiper-slide .card_text h2{
        color: #475950;
        font-size: 16px;
        font-family: Noto Sans JP;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        margin-bottom:5px;
        height: 96px;
      }
      .swiper-slide:hover .card_text h2{
        color: #c89932;
      }    
      .swiper-slide .card_text p{
        color: #475950;
        font-size: 16px;
        font-family: Noto Sans JP;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;

        position: absolute;
        bottom:16px;
        left:16px;
      }
      .swiper-slide:hover .card_text p{
        color: #c89932;

      }
    </style>

そして、bodyの閉じタグの前に以下のコードを挿入します。

index.html

<main id="product" class="_bgc">
※上と同じ（10個のカードがある）
</main>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script src="js/script_swp.js"></script>

このうち、

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

はswiperの処理内容が書かれたJSコードとなります。（こちらは特にダウンロード不要）

もう一つの、

<script src="js/script_swp.js"></script>

はこのあと、script_swp.jsというファイルの中に処理を記載しておきます。（今回はscript__swp.jsというファイル名にしています）

またheadタグ内に、Swiper用のCSSコードを埋め込みます。（こちらは特にダウンロード不要）

index.html

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>

上記のコードを書くと以下のように表示されます。（特に動作はしていない）

これを動作させるために、先程の script_swp.js に処理を記載します。

JSファイルへの記載

それでは設定内容をjsファイルに記載していきたいと思います。
まずは動かして、それから詳細を確認していきましょう。
最後にコメントアウトしてあるページネーションについては後で説明します。

script__swp.js

//swiper
const swiper = new Swiper('.swiper', {

    loop: true,
    speed:2000,
    spaceBetween:24,
    centeredSlides: true,
    initialSlide: 5,

    autoplay: {
        delay: 1000,
    },

    breakpoints:{
        0:{
          slidesPerView:'1.5',
        },
        500:{
            slidesPerView:'auto',
        },
    },


    // ページネーション
    //pagination: {
    //  el: ".swiper-pagination",
    //  clickable: true,
    //},
    // 前後の矢印
    //navigation: {
    // nextEl: ".swiper-button-next",
    //  prevEl: ".swiper-button-prev",
    //},

  });

そして、HTMLファイルのbody閉じタグの前に以下のコードを記載します。

index.html

    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script src="js/script_swp.js"></script>

すると、以下のようにカードがスライドしていると思います。

このjsコードについてそれぞれの項目を説明します。

.js

    loop: true, //ループをするかしないか？（Falseならループしない）
    speed:2000, //一回あたりの動くスピード（2000msかけて1回動く）
    spaceBetween:24,  //カード間のpx
    centeredSlides: true,  //スライドが中央寄せになる（Falseなら中央からズレて表示される）
    initialSlide: 5,  //何番目のカードからスタートするか？

    autoplay: {  //1000ms経過したら動かす
        delay: 1000,
    },

以下のbreakpointsについてはレスポンシブ化をする際に考慮する。下記の例のbreakpointsで0と500があるが、これはデバイスの幅を指している。

.js


    breakpoints:{
        0:{ //デバイスが0~499px（スマートフォンなど）のとき、表示されるスライド数は1.5枚となる。
          slidesPerView:'1.5',
        },
        500:{//500px以上のときはスライドカード数はautoとなる。
            slidesPerView:'auto',
        },
    },

breakpointsが0のときは以下のようになる。

ページネーションの設定

先程のHTMLファイルのコメントアウトしてある箇所を以下のように元に戻してください。

.html

        <!-- ページネーションを利用する場合↓ -->
        <div class="swiper-pagination"></div>

        <!-- ナビゲーションボタンを利用する場合↓（2行） -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

また、以下のように、jsファイルの方のページネーションの箇所のコメントアウトも以下のように元に戻してください。

.js

    // ページネーション
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    // 前後の矢印
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

すると、以下のように、矢印やページネーションも出るようになります。

コードまとめ

.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>

    <title>Swiper導入</title>

    <style>
/*ベース
*********************/
body {
  color: #475950;
  font-family: "Noto Sans JP", sans-serif;
}

a {
  text-decoration: none;
  color: #475950;
}

img {
  height: auto;
  max-width: 100%;
}

.break {
  display: block;
}


/*レイアウト
*********************/

._bgc {
  height: auto;
  background: #dbebc4;
}



/*MAIN(product)
**********************/
.product__title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  padding-top: 30px;
  margin-bottom: 91px;
}

/*swiper*/
      /* 全体のスタイル */
      .swiper-wrapper {
        width: 100%;
        height: 331px;

    }
    .swiper{
      height: 425px;
    }
    /* 全スライド共通スタイル */
    .swiper-slide {
        color: #ffffff;
        width: 264px;
    }
    
    .swiper-slide{
        width: 264px;
        background-color: #fff;
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
        text-align: left;
        position:relative;
      }

      .card_img{
        overflow: hidden;
      }
      .card_img img{
        width: 100%;
        height: 166px;
        object-fit:  cover; 
        transition: 0.3s; 
      }
      .swiper-slide:hover img{
        transform: scale(1.1);
      }
      .swiper-slide .card_text{
        padding:15px;
      }
      .swiper-slide .card_text h2{
        color: #475950;
        font-size: 16px;
        font-family: Noto Sans JP;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        margin-bottom:5px;
        height: 96px;
      }
      .swiper-slide:hover .card_text h2{
        color: #c89932;
      }    
      .swiper-slide .card_text p{
        color: #475950;
        font-size: 16px;
        font-family: Noto Sans JP;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;

        position: absolute;
        bottom:16px;
        left:16px;
      }
      .swiper-slide:hover .card_text p{
        color: #c89932;

      }
    </style>
</head>
<body>

    <!--メニュー一覧-->
    <main id="product" class="_bgc">
        <h1 class="product__title">メニュー一覧</h1>
      <div class="swiper">
      <!--Swiperで動かす部分を記載 -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_apple.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>りんご</h2>
                  <p>￥ 150（税込）</p>
                </div>
            </a>
          </div>
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_banana.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>バナナ</h2>
                  <p>￥ 140（税込）</p>
                </div>
            </a>
          </div>
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_blueberry.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>ブルーベリー</h2>
                  <p>￥ 200（税込）</p>
                </div>
            </a>
          </div>
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_cherry.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>さくらんぼ</h2>
                  <p>￥ 210（税込）</p>
                </div>
            </a>
          </div>
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_grape.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>ぶどう</h2>
                  <p>￥ 300（税込）</p>
                </div>
            </a>
          </div>
          <!-- Slides -->
          <div class="swiper-slide">
            <a href="#" class="card">
                <div class="card_img">
                  <img src="img/swp_orange.jpg" alt="">
                </div>
                <div class="card_text">
                  <h2>みかん</h2>
                  <p>￥ 150（税込）</p>
                </div>
            </a>
          </div>
         <!-- Slides -->
         <div class="swiper-slide">
          <a href="#" class="card">
              <div class="card_img">
                <img src="img/swp_pear.jpg" alt="">
              </div>
              <div class="card_text">
                  <h2>なし</h2>

                <p>￥ 90（税込）</p>
              </div>
          </a>
        </div>
        <!-- Slides -->
        <div class="swiper-slide">
          <a href="#" class="card">
              <div class="card_img">
                <img src="img/swp_pine.jpg" alt="">
              </div>
              <div class="card_text">
                <h2>パイナップル</h2>
                <p>￥ 300（税込）</p>
              </div>
          </a>
        </div>
        <!-- Slides -->
        <div class="swiper-slide">
          <a href="#" class="card">
              <div class="card_img">
                <img src="img/swp_strawberry.jpg" alt="">
              </div>
              <div class="card_text">
                <h2>いちご</h2>
                <p>￥ 100（税込）</p>
              </div>
          </a>
        </div>
        <!-- Slides -->
        <div class="swiper-slide">
          <a href="#" class="card">
              <div class="card_img">
                <img src="img/swp_watermelon.jpg" alt="">
              </div>
              <div class="card_text">
                <h2>西瓜</h2>
                <p>￥ 320（税込）</p>
              </div>
          </a>
        </div> 
 
 
        </div>
        <!-- ページネーションを利用する場合↓ -->
        <div class="swiper-pagination"></div>

        <!-- ナビゲーションボタンを利用する場合↓（2行） -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

      </div> 
    </main>


    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script src="js/script_swp.js"></script>
  </body>
</html>

.js

//swiper
const swiper = new Swiper('.swiper', {

    loop: true,
    speed:2000,
    spaceBetween:24,
    centeredSlides: true,
    initialSlide: 5,

    breakpoints:{
        0:{
          slidesPerView:'1.5',
        },
        500:{
            slidesPerView:'auto',
        },
    },

    autoplay: {
        delay: 1000,
    },

    // ページネーション
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    // 前後の矢印
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

ファーストビューでも使用は可能です

トップページにある以下のようなファーストビューでもswiperは使用可能です。簡単にコード載せておきます。

.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>

    <title>Swiper導入</title>

    <style>
/*ベース
*********************/
body {
  color: #475950;
  font-family: "Noto Sans JP", sans-serif;
}

a {
  text-decoration: none;
  color: #475950;
}

img {
  height: auto;
  max-width: 100%;
}

.break {
  display: block;
}


/*レイアウト
*********************/

._bgc {
  height: auto;
  background: #dbebc4;
}



/*MAIN(product)
**********************/
.product__title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  padding-top: 30px;
  margin-bottom: 91px;
}

.swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 500px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 400px;
}

.swiper-slide:nth-child(3n + 1) {
  /*1、4、7、3n+1枚目の背景色 */
  background-image:url(img/pc1.jpg);
  background-size: cover;
  background-position: center;
}

.swiper-slide:nth-child(3n + 2) {
  /*2、5、8、3n+2枚目の背景色 */
  background-image:url(img/pc2.jpg);
  background-size: cover;
  background-position: center;
}

.swiper-slide:nth-child(3n + 3) {
  /*3、6、9、3n+3枚目の背景色 */
  background-image:url(img/pc3.jpg);
  background-size: cover;
  background-position: center;
}
    </style>
</head>
<body>

    <!--メニュー一覧-->
    <main id="product" class="_bgc">
        <h1 class="product__title">メイン画像</h1>
      <!-- スライダーはここから -->
            <div class="swiper">
              <!-- 必要に応じたwrapper -->
              <div class="swiper-wrapper">
                <!-- slide -->
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
              </div>
              <!--  Pagenation  -->
              <div class="swiper-pagination"></div>
              <!-- arrows -->
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>

      </div> 
    </main>


    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script src="js/script_swp.js"></script>
  </body>
</html>

.js

const swiper = new Swiper(".swiper", {
  // 前後の矢印
loop:true,
speed:1000,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

});