slick.jsとMagnific Popupを使って、スライド要素をモーダル表示する方法
jQueryのスライダープラグイン「slick.js」とモーダル系プラグイン「Magnific Popup」を組み合わせて色々やってみます。
目次
サンプル①
スライド要素をモーダル表示するサンプル。
モーダル表示中はスライダーを一時停止しているのがポイントです。
HTML
こんな感じでHTMLを作成
<!-- CSS -->
<link rel="stylesheet" href="magnific-popup.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<!-- JS -->
<script defer src="jquery.magnific-popup.min.js"></script>
<script defer src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="slider">
<div class="slide"><a href="img01.jpg" class="popup-image"><img src="img01.jpg"></a></div>
<div class="slide"><a href="img02.jpg" class="popup-image"><img src="img02.jpg"></a></div>
<div class="slide"><a href="img03.jpg" class="popup-image"><img src="img03.jpg"></a></div>
<div class="slide"><a href="img04.jpg" class="popup-image"><img src="img04.jpg"></a></div>
</div>
JS
slickは普通に実行。
Magnific Popupのcallbacksに、開く時にスライダーを一時停止する処理と、閉じる時に再スタートする処理を入れています。
$(function(){
//slick (オプションはお好みで)
$(".slider").slick({
autoplay: true,
centerMode: true,
variableWidth: true
});
//Magnific Popup
$(".popup-image").magnificPopup({
type: "image",
callbacks: {
elementParse: function(item) { //モーダルを開く時
//スライダー一時停止処理
//親要素の「.slider」を取得
let slider = item.el.closest(".slider");
//親要素の「.slider」が存在し、クラス「paused」を持っていなければ
if(slider.length && !slider.hasClass("paused")){
//親要素の「.slider」を一時停止、クラス「paused」を付与
slider.slick("slickPause").addClass("paused");
}
},
close: function(){ //モーダルを閉じるとき
//「.slider.paused」を再開し、クラス「paused」を削除
$(".slider.paused").slick("slickPlay").removeClass("paused");
}
}
});
});
参考
slickの一時停止方法についてはこちら
サンプル② ギャラリー表示
スライダー要素をモーダル内でギャラリー表示にするサンプルです。
slickでスライド要素が複製されますが、ギャラリーにはそれを含めないのがポイントです。
HTML
こんな感じでHTMLを作成
<!-- CSS -->
<link rel="stylesheet" href="magnific-popup.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<!-- JS -->
<script defer src="jquery.magnific-popup.min.js"></script>
<script defer src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="gallery-container slider">
<div class="slide"><a href="img01.jpg"><img src="img01.jpg"></a></div>
<div class="slide"><a href="img02.jpg"><img src="img02.jpg"></a></div>
<div class="slide"><a href="img03.jpg"><img src="img03.jpg"></a></div>
<div class="slide"><a href="img04.jpg"><img src="img04.jpg"></a></div>
</div>
JS
slickは普通に実行。
callbacksでスライダーの一時停止・再開する処理も先ほどのサンプルと同様。
11行目で、slickによって複製された.slick-clonedの画像は除外し、ギャラリー定義しています。
また36行目から、slickのcenterMode (両側のスライドが見える状態) を使用している場合は、両脇の.slick-cloned要素がクリックできてしまい、モーダル表示できないので、.slick-clonedではない方のスライドをクリックしたことにする処理です。 centerModeを使わない場合は不要です。
$(function(){
//slick (オプションはお好みで)
$(".slider").slick({
autoplay: true,
centerMode: true,
variableWidth: true
});
//Magnific Popup ギャラリー
$(".gallery-container").magnificPopup({
delegate: ".slide:not(.slick-cloned) a",
type: "image",
gallery: {
enabled:true
},
callbacks: {
elementParse: function(item) { //モーダルを開く時
//スライダー一時停止処理
//親要素の「.slider」を取得
let slider = item.el.closest(".slider");
//親要素の「.slider」が存在し、クラス「paused」を持っていなければ
if(slider.length && !slider.hasClass("paused")){
//親要素の「.slider」を一時停止、クラス「paused」を付与
slider.slick("slickPause").addClass("paused");
}
},
close: function(){ //モーダルを閉じるとき
//「.slider.paused」を再開し、クラス「paused」を削除
$(".slider.paused").slick("slickPlay").removeClass("paused");
}
}
});
});
//slickのcenterModeで .slick-cloned がクリックされたときの処理 (任意)
$(".slider").on("init", function(){
$(".gallery-container .slick-cloned a").on("click", function(){
//クリックされたスライドのhrefを取得
let href = $(this).attr("href");
//slick-clonedではない、同じhrefのaを取得
let target = $(".slick_mfp_gallery .slide:not(.slick-cloned) a[href='"+href+"']");
//それをクリック
target.click();
return false;
});
});
コメント
「できました!」などの報告もお待ちしております。
お役に立てましたら応援をお待ちしております!
頂いた応援は子育てに活用させていただきます。
または以下のボタンからなにか買って応援 (PR)
Amazon
楽天市場
Yahoo!ショッピング