スライダーからモーダルを起動させる方法【Swiper+Modaal】

2023.01.10
Javascript

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

1. 完成形のデモ
2. Swiperとは
- 2.1. CDNを利用する場合
- 2.2. ファイルを直接ダウンロードする場合
3. Modaalとは
4. 実装方法
5. まとめ

完成形のデモ

下に置いてあるデモではスライダーの画像をクリックすると、モーダルウィンドウが表示されるようになっています。

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

Swiperとは

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

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

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

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

CDNを利用する場合

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

SwiperのCDNはこちら

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

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

Swiperの配布場所

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が必要なので、jQuery本体をダウンロードするか、CDNを利用します。
いずれの場合も下記のリンク先から可能です。

jQueryの配布場所

実装方法

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

<div class="wrap">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><a href="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample1.png" class="image" data-modaal-desc="画像1"><img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample1.png" alt=""></a></div>
      <div class="swiper-slide"><a href="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample2.png" class="image" data-modaal-desc="画像2"><img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample2.png" alt=""></a></div>
      <div class="swiper-slide"><a href="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample3.png" class="image" data-modaal-desc="画像3"><img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample3.png" alt=""></a></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

大枠はSwiperでスライダーを設置する際と同じ記述で大丈夫です。
違いは各スライダーの中身をaタグで囲むことです。

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

//Modaall設定
$(function(){
$('.image').modaal({　//スライド内に書いたaタグの要素を指定します
   type: 'image'　　　//モーダルウィンドウで表示させたい要素の指定です
  });
});

次にJSの記述をしていきますが、ここでもSwiperの記述はスライダーを普通に表示させる時と同じで大丈夫です。
Modaalの設定では、今回画像をモーダルウィンドウで表示させたいので、typeをimageにしています。
JSの記述はこれだけで実装ができます。