--Swiper-- ウェブサイトで良く見かけるスライドショーなどを簡単に作成してくれるライブラリー #1

はじめに

概要

Swiperは、ウェブサイトで良く見かけるスライドショーなどを簡単に作成してくれるJavascriptライブラリーです。Web制作では欠かせないスキルになりますのでマスターしていきましょう。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

読者

–Swiper– ウェブサイトで良く見かけるスライドショーなどを簡単に作成…は、最初にどこを理解するとよいですか？

木村

対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

サンプルコード

サンプルコードでは、–Swiper– ウェブサイトで良く見かけるスライドショーなどを簡単に作成してくれるライブラリー #1を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

この記事はこちらのサンプルコードを解説しています。サンプルコードをテキストエディタで開いて、解説を読むことで理解がより容易になります。一緒にSwiperを実装していきましょう。

サンプルコードで押さえたいポイント

サンプルコードは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

サンプルコードの確認方法

ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。

Swiperの実装

Swiperの実装では、–Swiper– ウェブサイトで良く見かけるスライドショーなどを簡単に作成してくれるライブラリー #1を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

Swiperの公式ページ https://swiperjs.com/ CDN

Get StartedボタンからCDNが入手できます。様々な方法がありますが、まずはCDNで試してみましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- 必須事項 -->
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <!-- リセットCSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
    />

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

    <!-- 独自のCSS -->
    <link rel="stylesheet" href="dist/css/index.min.css" />
  </head>

  <body>
    
    <!-- swiper -->
     <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <!-- 独自のJs -->
    <script type="module" src="js/index.js"></script>
  </body>
</html>

正常に動作させるためには、添付する位置に注意して各リンクを設定します。なお、Jsファイルはmoduleを使用し、cssはScssを使用しています。moduleについてはこちら・Scssについてはこちらを参照ください。

Swiper

<div class="hero">
  <div class="hero__inner wrap">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://picsum.photos/1000/500?random=1" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/1000/500?random=2" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/1000/500?random=3" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/1000/500?random=4" alt="" />
        </div>
      </div>
      <div class="swiper-button-next fa-circle-right"></div>
      <div class="swiper-button-prev fa-circle-left"></div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- /.swiper -->
  </div>
  <!-- /.hero__inner -->
</div>
<!-- /.hero -->

swiper全体の余白を調整するために、heroタグを追加で設定しております。

便利なオプション

便利なオプションでは、–Swiper– ウェブサイトで良く見かけるスライドショーなどを簡単に作成してくれるライブラリー #1を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

以下のオプションは、実践でよく使います。こちらで詳しく説明していきましょう。

swiper.js

export class HeroSlider {
  constructor(el) {
    this.el = el;
    this.swiper = this._initSwiper();
  }

  _initSwiper() {
    return new Swiper(this.el, {
      loop: true,
      speed: 1000,
      slidesPerView: 1, // 画像の枚数
      spaceBetween: 30, // 画像の余白

      autoplay: {
        delay: 3000, // 次のスライダーの間隔
        disableOnInteraction: false, // 画面操作後も、スライダーを継続
      },

      breakpoints: {
        360: {
          slidesPerView: 1,
        },
        600: {
          slidesPerView: 1.5,
        },
        960: {
          slidesPerView: 1.5,
          centeredSlides: true, //　画像を中央に寄せる
        },
      },

      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },

      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  }
}

コメントアウトで解説している内容は、Swiperを実装する上で、必要なオプションになりますのでご参考ください。

autoplay

ウェブサイトやアプリケーションのスライダー（画像やコンテンツを順番に表示する機能）などでよく使われる機能の一つです。これにより、ユーザーが手動で次のスライドを切り替える必要がなく、自動的にスライドが切り替わるようになります。

pagination

現在のスライドの位置を示すためのUI要素を提供します。ページネーションは通常、スライダーの下部に表示され、ユーザーにスライドの位置や総数を知らせる役割を果たします。HTMLにもpaginationを記述必要があります。

便利なオプションの補足

便利なオプションの補足では、前の章に続く項目を整理します。各項目の役割と違いを確認しながら、必要な部分を自分の制作へ取り入れてください。

navigation

ユーザーがスライドを切り替えるためのUI要素を提供します。こちらもHTMLに記述が必要です。

breakpoints

レスポンシブなデザインを実現するためにSwiperライブラリで提供される機能です。ブレイクポイントは、ウェブサイトやアプリケーションが異なる画面サイズやデバイスに適応するために使用されます。metaタグにviewportが設定されていないと、上手く機能しない場合がありますので注意ください。例:<meta name=”viewport” content=”width=device-width,initial-scale=1″ />

以上です。お疲れ様でした。実装は上手くできましたでしょうか? もし、何かお困りなことがありましたら、お気軽にご連絡くださいませ。お問い合わせフォームはこちらです。

まとめ

Swiperを活用することで、スライダーが容易に実装できる
便利なオプションが多数準備されている
様々なブラウザにも対応している
Web制作では必須のスキルである

–Swiper– ウェブサイトで良く見かけるスライドショーなどを簡単に作成してくれるライブラリー #1

目次

サンプルコード

サンプルコードで押さえたいポイント

サンプルコードの確認方法

Swiperの実装

HTML

Swiper

便利なオプション

swiper.js

autoplay

pagination

便利なオプションの補足

navigation

breakpoints

まとめ

コメント（0件）

会員ログイン後にコメントできます

目次

サンプルコード

サンプルコードで押さえたいポイント

サンプルコードの確認方法

Swiperの実装

HTML

Swiper

便利なオプション

swiper.js

autoplay

pagination

便利なオプションの補足

navigation

breakpoints

まとめ

関連する記事

【Swiper】様々なスライダーを実装

会員ログイン後にコメントできます