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");
			}
		}
	});
});

参考

Magnific Popup Documentation

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;
	});
});