How to display slide elements in a modal using slick.js and Magnific Popup

Sample ①

A sample to display slide elements in a modal.

The key point is that the slider is paused while the modal is displayed.

HTML

Create HTML like this

<!-- 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 runs normally.

In Magnific Popup's callbacks, I've included processes to pause the slider when opening and restart it when closing.

$(function(){
	//slick (options as you like)
	$(".slider").slick({
		autoplay: true,
		centerMode: true,
		variableWidth: true
	});

	//Magnific Popup
	$(".popup-image").magnificPopup({
		type: "image",
		callbacks: {
			elementParse: function(item) { //When opening the modal
				//Slider pause process

				//Get the parent element ".slider"
				let slider = item.el.closest(".slider");
				//If the parent element ".slider" exists and does not have the class "paused"
				if(slider.length && !slider.hasClass("paused")){
					//Pause the parent element ".slider" and add the class "paused"
					slider.slick("slickPause").addClass("paused");
				}
			},
			close: function(){ //When closing the modal
				//Restart ".slider.paused" and remove the class "paused"
				$(".slider.paused").slick("slickPlay").removeClass("paused");
			}
		}
	});
});

Reference

Magnific Popup Documentation

Click here for how to pause slick

【slick.js】How to add slider pause/play buttons

Sample ② Gallery Display

This is a sample to display slider elements as a gallery within a modal.

The key point is that although slick duplicates slide elements, they are not included in the gallery.

HTML

Create HTML like this

<!-- 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 runs normally.

The process of pausing and restarting the slider in callbacks is the same as in the previous sample.

On line 11, images with .slick-cloned that are duplicated by slick are excluded and defined as a gallery.

Also, from line 36, if slick's centerMode (where slides on both sides are visible) is used, the .slick-cloned elements on both sides can be clicked, preventing modal display. So, this process simulates clicking the slide that is not .slick-cloned. This is not necessary if centerMode is not used.

$(function(){
	//slick (options as you like)
	$(".slider").slick({
		autoplay: true,
		centerMode: true,
		variableWidth: true
	});

	//Magnific Popup Gallery
	$(".gallery-container").magnificPopup({
		delegate: ".slide:not(.slick-cloned) a",
		type: "image",
		gallery: {
			enabled:true
		},
		callbacks: {
			elementParse: function(item) { //When opening the modal
				//Slider pause process

				//Get the parent element ".slider"
				let slider = item.el.closest(".slider");
				//If the parent element ".slider" exists and does not have the class "paused"
				if(slider.length && !slider.hasClass("paused")){
					//Pause the parent element ".slider" and add the class "paused"
					slider.slick("slickPause").addClass("paused");
				}
			},
			close: function(){ //When closing the modal
				//Restart ".slider.paused" and remove the class "paused"
				$(".slider.paused").slick("slickPlay").removeClass("paused");
			}
		}
	});
});

//Process when .slick-cloned is clicked in slick's centerMode (optional)
$(".slider").on("init", function(){
	$(".gallery-container .slick-cloned a").on("click", function(){
		//Get the href of the clicked slide
		let href = $(this).attr("href");
		//Get the <a> with the same href that is not slick-cloned
		let target = $(".slick_mfp_gallery .slide:not(.slick-cloned) a[href='"+href+"']");
		//Click it
		target.click();
		return false;
	});
});

Sample ③ Gallery Display Including Videos

This is a sample that mixes YouTube videos into the gallery from Sample ②.

It's basically the same as Sample ②, but the key point is to add the mfp-iframe class to videos.

HTML

Create HTML like this

<!-- 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>
	<!-- Add class="mfp-iframe" to videos -->
	<div class="slide"><a href="https://www.youtube.com/watch?v=VIDEO_ID" class="mfp-iframe"><img src="video_thumb.jpg"></a></div>
	<div class="slide"><a href="img02.jpg"><img src="img02.jpg"></a></div>
</div>

By adding the mfp-iframe class to <a> tags that you want to be videos (like YouTube or Vimeo), Magnific Popup will convert them to iframe URLs.

JS

This is also basically the same as Sample ②.

$(function(){
	//slick (options as you like)
	$(".slider").slick({
		autoplay: true,
		centerMode: true,
		variableWidth: true
	});

	//Magnific Popup Gallery
	$(".gallery-container").magnificPopup({
		delegate: ".slide:not(.slick-cloned) a",
		type: "image",
		gallery: {
			enabled:true
		},
		callbacks: {
			elementParse: function(item) { //When opening the modal
				//Slider pause process

				//Get the parent element ".slider"
				let slider = item.el.closest(".slider");
				//If the parent element ".slider" exists and does not have the class "paused"
				if(slider.length && !slider.hasClass("paused")){
					//Pause the parent element ".slider" and add the class "paused"
					slider.slick("slickPause").addClass("paused");
				}
			},
			close: function(){ //When closing the modal
				//Restart ".slider.paused" and remove the class "paused"
				$(".slider.paused").slick("slickPlay").removeClass("paused");
			}
		}
	});
});

//Process when .slick-cloned is clicked in slick's centerMode (optional)
$(".slider").on("init", function(){
	$(".gallery-container .slick-cloned a").on("click", function(){
		//Get the href of the clicked slide
		let href = $(this).attr("href");
		//Get the <a> with the same href that is not slick-cloned
		let target = $(".gallery-container .slide:not(.slick-cloned) a[href='"+href+"']");
		//Click it
		target.click();
		return false;
	});
});

When the popup is closed, Magnific Popup automatically resets the iframe's src, so the video also stops.

Reference

Magnific Popup Documentation

Comments

We also welcome reports such as 'It worked!'

2026-07-10
Anonymous

The explanation was very helpful! Thank you. Could you please tell me how to play videos when Magnific Popup is used in Sample 2?
2026-07-13
Owner

Thank you for your comment!

Sample ③ has been added, so please refer to it if you like!