スライダーからモーダルを起動させる方法【Swiper+Modaal】
- 2023.01.10
- Javascript
今回はSwiperとModaalを合わせて使用して、スライダーからモーダルをウィンドウを表示できるようにします。
完成形のデモ
下に置いてあるデモではスライダーの画像をクリックすると、モーダルウィンドウが表示されるようになっています。
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の一覧が記載されているページです。
ファイルを直接ダウンロードする場合
基本的には下記の2ファイルをダウンロードすればOKです。
・swiper-bundle.min.js
・swiper-bundle.min.css
Modaalとは
次にModaalの特徴を簡単にご紹介します。
Modaalは簡単な設定だけで、モーダルウィンドウを表示できるようになるプラグインです。
使用する際にはjQueryは必要となりますが、オプションも豊富で、モーダルウィンドウを表示させたい場合は非常に役立ちます。
Modaalは以下の方法で利用できます。
- CDNを利用
- ファイルを直接ダウンロード
CDNを利用する場合
下のリンク先がCDNの一覧が記載されているページです。
ファイルを直接ダウンロードする場合
下記の2ファイルをダウンロードすればOKです。
・「dist」>「css」>「modaal.min.css」
・「dist」>「js」>「modaal.min.js」
jQueryのダウンロード
Modaalを使用するにはjQueryが必要なので、jQuery本体をダウンロードするか、CDNを利用します。
いずれの場合も下記のリンク先から可能です。
実装方法
まずはこのように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の記述はこれだけで実装ができます。
まとめ
今回スライダーからモーダルをウィンドウを表示できるようにする方法をご紹介しました。
使用したプラグインのどちらも簡単に使用できるものだったため、組み合わせて使っても実装は簡単にできました。
上記のModaalのJS部分で、type: ‘image’ と書いている部分を変更すると、Youtubeの動画を表示させることもできます。
少しカスタマイズするだけで様々な用途に使えるので、色々と試してみて下さい!
-
前の記事
query_posts と get_posts は何が違う? 2022.12.16
-
次の記事
ホバー時に文字がアニメーションするコードスニペット! 2023.01.11