JavaScript

公開日時：2022.06.10

最終更新日:2022/08/05

jQueryを使わないSwiperでスライドショーを作ろう！

アイキャッチ

こんにちは！
仕事で引きこもりがちなGlobal Web Designの福田です(笑)

私は最近Web制作でめっきりjQueryは使用しなくなりました。
jQueryはとても扱いやすく便利なのですが、ファイルが重く使いずらいなと思っていました。

そんなときに見つけたのがSwiperというスライドショーライブラリ！
ただSwiperの公式サイトはすべて英語で説明されているため、はじめてSwiperを使う方にとっては難しく感じると思います。

そこで今回はjQueryを使わないSwiperをご紹介いたします！

Swiperとは？

画像やコンテンツを横並びに表示して、スライドして表示させることがあると思います。
Swiperはスライドショーが作れるJavaScriptライブラリになります。

Swiperの一番の特徴は使用しているライブラリにとらわれないということ。
jQueryなどを使用するときにJavaScriptのライブラリを読み込む必要がありますが、SwiperはJavaScriptのライブラリを使用しないため他のスライドライブラリーよりも早く読み込むことができます。

Swiperを導入しよう！

Swiperのドキュメントを見ると、
公式サイト: https://swiperjs.com/
Demo: https://swiperjs.com/demos

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

と

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

の２つを読み込んで使用すると書いてあるので、この２つをHTMLに書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>スライドショー</title>
  <!-- swiper css　読み込み -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
</head>
<body>
  <!-- swiper js 読み込み -->
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</body>
</html>

headタグの中にSwiperのCSSを、body閉じタグ直前にSwiperのJavascriptライブラリーを読み込みました。

次にスライドさせるHTMLのレイアウトをHTMLに書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>スライドショー</title>
  <!-- swiper css　読み込み -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <main>
    <!-- Slider メインコンテナー -->
    <div class="swiper mySwiper">
      <!-- Additional required wrapper -->
      <dic class="swiper-wrapper">
        <!-- スライドさせるitem -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
    </div>
  </main>
  <!-- swiper js 読み込み -->
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

  <!-- Swiper 初期設定　-->
  <script>
    var swiper = new Swiper(".mySwiper", {});
  </script>
</body>
</html>

ここに書いた

<!-- Slider メインコンテナー -->
    <div class="swiper mySwiper">
      <!-- Additional required wrapper -->
      <dic class="swiper-wrapper">
        <!-- スライドさせるitem -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
    </div>

の部分がSwiperスライダーの基本的な書き方になります。

今回はSwiperのメインコンテナーのクラスに「mySwiper」を書きました。
最後にこの「mySwiper」を使用してスライダーを完成させます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>スライドショー</title>
  <!-- swiper css　読み込み -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <main>
    <!-- Slider メインコンテナー -->
    <div class="swiper mySwiper">
      <!-- Additional required wrapper -->
      <dic class="swiper-wrapper">
        <!-- スライドさせるitem -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
    </div>
  </main>
  <!-- swiper js 読み込み -->
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {});
  </script>
</body>
</html>

bodyタグの閉じタグの前に

<!-- Swiper 初期設定　-->
  <script>
    var swiper = new Swiper(".mySwiper", {});
  </script>

を書いてスライドショーができます。
あとはスライドをわかりやすくするためにCSSで見た目を調整します。

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

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

.swiper-slide:nth-child(3n + 1) {
  background-color: red;
}

.swiper-slide:nth-child(3n + 2) {
  /*2、5、8枚目の背景色 */
  background-color: green;
}

.swiper-slide:nth-child(3n + 3) {
  /*3、6、9枚目の背景色 */
  background-color: blue;
}

これで基本的なスライドショーを作ることができました。

See the Pen Untitled by Fukuda Yuzuru (@fukuda-yuzuru) on CodePen.

Swiperの

<!-- Swiper 初期設定　-->
  <script>
    var swiper = new Swiper(".mySwiper", {});
  </script>

はjsファイルに書くのではなくHTMLに書いたほうがいいでしょう。
jsファイルに書いてしまうと動かない場合があるので注意が必要です。

ページネーション、ナビゲートボタン、スクロールバーの設置

ページネーション、ナビゲートボタン、スクロールバーなどは必要に応じてHTMLに書きます。

<!-- Slider メインコンテナー -->
    <div class="swiper mySwiper">
      <!-- Additional required wrapper -->
      <dic class="swiper-wrapper">
        <!-- スライドさせるitem -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <!-- 必要に応じて　ページネーション -->
      <div class="swiper-pagination"></div>

      <!-- 必要に応じて　ナビゲートボタン -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!--　必要に応じて スクロールバー -->
      <div class="swiper-scrollbar"></div>
    </div>

そして

var swiper = new Swiper(".mySwiper", {
 //この中にオプションを書いていく
});

「(“.mySwiper”, {});」の「{}」の中にオブションを書いていきます。

var swiper = new Swiper(".mySwiper",{
  //ページネーション
  pagination: {
    el: ".swiper-pagination",
  }, 
  //ナビゲートボタン
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  //スクロールバー
  scrollbar: {
    el: ".swiper-scrollbar",
    hide: true,
  },
});

See the Pen Untitled by Fukuda Yuzuru (@fukuda-yuzuru) on CodePen.

HTMLとJavaScriptに該当のコードを記載するだけでページネーション、ナビゲートボタン、スクロールバーを設置できました。

その他のオプション

ここでは、Swiperでよく使うオプションをご紹介します。

slidesPerView

「slidesPerView」はスライドを表示枚数のオプションになります。

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 3,
});

「slidesPerView: 3,」と書くとことで表示枚数が3枚になります。

spaceBetween

「spaceBetween」はスライドする要素に隙間を入れることができます。

var swiper = new Swiper(".mySwiper", {
  spaceBetween: 30,
});

「spaceBetween: 30」と書くことでスライドする要素の間を30px空けることができます。

loop: true

var swiper = new Swiper(".mySwiper", {
  loop: true,
});

「loop: true,」と書くとスライドが最後の要素に入ったあとに1枚目のスライドに戻ります。
初期値は「loop: false」なのでスライドが最後の要素で止まります。

Autoplay

「Autoplay」はスライドを自動でスライドさせるオプションになります。

var swiper = new Swiper(".mySwiper", {
  autoplay: {
    delay: 3000,//3秒後にスライド
    disableOnInteraction: false, 
  },
});

「autoplay」の「{}」の中に「autoplay」のオプションを書きます。

「delay」は自動でスライドさせる時間を決めます。
今回は「delay: 3000,」と書いたのでスライドが3秒たつとスライドします。

「disableOnInteraction」はスライドにユーザのアクションがあったときに、自動再生を継続するかしないかを決めることができます。
初期値は「disableOnInteraction: true,」でユーザーのアクションがあると、自動再生が無効になります。
「disableOnInteraction: false,」とすることでユーザーのアクション後も自動再生を継続することが出来ます。

breakpoints

「breakpoints」はレスポンシブしたときの表示枚数などを変えることができます。

var swiper = new Swiper(".mySwiper", {
  //640px以下の時
  slidesPerView: 1,
  spaceBetween: 10,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  breakpoints: {
    //640px以上の時
    640: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    //768px以上の時
    768: {
      slidesPerView: 4,
      spaceBetween: 40,
    },
    //1024px以上の時
    1024: {
      slidesPerView: 5,
      spaceBetween: 50,
    },
  },
});

「breakpoints」は複数指定することができます。
最初に「breakpoints」をかけた箇所から指定したpx以上の画面幅になると、指定したオプションが適用されます。
「breakpoints」を適用していない部分は、最初の「breakpoints」以下の時に適用されます。

紹介したオプションを実装

上記で紹介したオプションを使ってレスポンシブの自動再生スライドショーを実装しましょう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>スライドショー</title>
  <!-- swiper css　読み込み -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <main>
    <!-- Slider メインコンテナー -->
    <div class="swiper mySwiper">
      <!-- Additional required wrapper -->
      <dic class="swiper-wrapper">
        <!-- スライドさせるitem -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <!-- 必要に応じて　ページネーション -->
      <div class="swiper-pagination"></div>

      <!-- 必要に応じて　ナビゲートボタン -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!--　必要に応じて スクロールバー -->
      <div class="swiper-scrollbar"></div>
    </div>
  </main>
  <!-- swiper js 読み込み -->
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

  <!-- Swiper 初期設定　-->
  <script>
    var swiper = new Swiper(".mySwiper", {
      //640px以下の時
      //ページネーション
      pagination: {
        el: ".swiper-pagination",
      }, 
      //ナビゲートボタン
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      //スクロールバー
      scrollbar: {
        el: ".swiper-scrollbar",
        hide: true,
      },
      slidesPerView: 1,//スライド枚数
      spaceBetween: 10,//各スライドの幅
      autoplay: {
        delay: 1000,//1秒後にスライド
        disableOnInteraction: false,//ユーザーアクション後の自動再生を続ける
      },
      breakpoints: {
        //640px以上の時
        640: {
          slidesPerView: 3,//スライド枚数
          spaceBetween: 20,//各スライドの幅
        },
      },
    });
  </script>
</body>
</html>

See the Pen swiper by Fukuda Yuzuru (@fukuda-yuzuru) on CodePen.

Swiperまとめ

いかがでしょうか？
今回はjQueryを使わないSwiperをご紹介しました。

Demo: https://swiperjs.com/demos
上記のデモページを見ると他にもさまざまなオプションがあり好きなスライダーに実装することが出来ます。
jQueryを使わずにスライドショーを実装したい方はぜひSwiperを使用してみてください！

この記事を書いた人
福田　弦

福田 弦

2020年にGlobal Web Desingを立ち上げ。得意分野は、コーディング、CMS構築、ディレクション。現在はブログ、マーケティングなどを勉強中。趣味はドラム。

あわせて読みたい

アイキャッチ
ワイヤー
イラスト
フリーランス
img
レイアウト

SNSでシェア

Web制作に関するお悩みがある方はお気軽にご連絡下さい。

ご相談・お問い合わせ

メールでWeb制作に関して
相談や見積もり依頼をされたい方に、
お問い合わせフォームより
お問い合わせを承っております。
フォームからお問い合わせ下さい。

お問い合わせフォームへ