• 【Modaal+Swiper】モーダルの中にスライダーを実装する方法

【Modaal+Swiper】モーダルの中にスライダーを実装する方法

【Modaal+Swiper】モーダルの中にスライダーを実装する方法

今回はModaalとSwiperを合わせて使用して、モーダルウィンドウ上にスライダーを表示できるようにします。

目次

実装した場合のデモ

このデモでモーダルウィンドウを開くと、その中にスライダーが設置されているのが分かると思います。

See the Pen カルーセルからモーダル起動 (Swiper&Modaal) by bst-test-js (@bst-test-js) on CodePen.

Modaalとは

次にModaalの特徴を簡単にご紹介します。
Modaalは簡単な設定だけで、モーダルウィンドウを表示できるようになるプラグインです。

使用する際にはjQueryは必要となりますが、オプションも豊富で、モーダルウィンドウを表示させたい場合は非常に役立ちます。

Modaalは以下の方法で利用できます。

  • CDNを利用
  • ファイルを直接ダウンロード

CDNを利用する場合

下のリンク先がCDNの一覧が記載されているページです。

ModaalのCDNはこちら

ファイルを直接ダウンロードする場合

下記の2ファイルをダウンロードすればOKです。
・「dist」>「css」>「modaal.min.css」
・「dist」>「js」>「modaal.min.js」

Modaalの配布場所

jQueryのダウンロード

ModaalにはjQueryが必要です。
CDNを利用するか、jQuery本体をダウンロードします。
いずれの場合も下記のリンク先から可能です。

jQueryの配布場所

Swiperとは

まずSwiperの特徴を簡単にご紹介します。
Swiperはスライダーが簡単に実装できるJavaScriptのライブラリです。

SwiperはjQueryを必要としないので、jQueryが要件として使えない場合でも、問題なく使用できます。
更にオプションも豊富で、使用者も多いため検索しても様々な使用例が出てくるので、用途に合わせたカスタマイズもしやすいです。

Swiperは以下の方法で利用できます。

  • CDNを利用
  • ファイルを直接ダウンロード

CDNを利用する場合

下のリンク先がCDNの一覧が記載されているページです。

SwiperのCDNはこちら

ファイルを直接ダウンロードする場合

基本的には下記の2ファイルをダウンロードすればOKです。
・swiper-bundle.min.js
・swiper-bundle.min.css

Swiperの配布場所

実装方法

まずはこのようにHTMLを書きます。

<div class="wrap">
<!--モーダルトリガー部分-->
  <a href="#inline" class="inline"><img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample1.png" alt=""><p>開く</p></a>
  
<!--スライダー部分-->
<div id="inline" style="display:none;">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"> <img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample1.png" alt=""> </div>
      <div class="swiper-slide"> <img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample2.png" alt=""> </div>
      <div class="swiper-slide"> <img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample3.png" alt=""> </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
  
</div>

スライダーのHTML部分を一つ枠で囲み、IDを設定しておきます。
またここに対してstyleを設定してdisplay:noneにする必要があります。

モーダルのトリガー部分では、aタグに先ほど設定したIDをリンク先として入れます。

//Swiper設定
const mySwiper = new Swiper ('.swiper', {
  loop:true,
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
      navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  
  //Modaall設定
  $(".inline").modaal({
  });

次にJSの記述をしていきますが、Swiperは通常通りの記述をして、Modaalの方も特に変わったところもなく、モーダルのトリガーとなる要素を指定しています。

まとめ

今回モーダルウィンドウの中にスライダーを表示できる方法をご紹介しました。
ている部分を変更すると、Youtubeの動画を表示させることもできます。
代表的な画像一枚をページに表示させ、モーダルウィンドウの中にスライダーで複数画像が表示できると、画像をそんなに多く設定できないページでも、多くの画像を見せることが可能になります。
便利な方法なので試してみて下さい！

無料WordPressテーマ