JSFiddle - React, Tailwind, and code Playground

by chaserof

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <a href="#popup" class="popup-link">открыть 1 айтем</a>
  <a href="#popup" class="popup-link">открыть 2 айтем</a>
  <a href="#popup" class="popup-link">открыть 3 айтем</a>
  
  <div id="popup" class="mfp-hide">
    <div class="slider">
      <div class="slider-item">первый айтем</div>
      <div class="slider-item">второй айтем</div>
      <div class="slider-item">третий айтем</div>
    </div>
  </div>
  
</body>
</html>

CSS

#popup {
  width: 400px;
  margin: 0 auto;
}
.popup-link {
  margin: 0 20px
}
#popup .slider-item {
  border: 3px solid #ccc;
  margin: 20px 0;
  text-align: center;
}

JavaScript

$('.popup-link').magnificPopup({
		midClick: true,
		type: 'inline',
		callbacks: {
			open: function() {
				$('.slider').slick({
					infinite: true,
					slidesToShow: 1,
					dots: true,
				});
				var $current = ($(this).attr('index'))
				$('.slider').slick('slickGoTo', + $current);
			},
		}
	});