JSFiddle - React, Tailwind, and code Playground

by TrinhThang

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css">
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/magnific-popup.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/jquery.magnific-popup.min.js"></script>
<div class="carousel">
  <a href="//satyr.io/1280x720/1"><img src="//satyr.io/600x400/1" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/2"><img src="//satyr.io/600x400/2" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/3"><img src="//satyr.io/600x400/3" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/4"><img src="//satyr.io/600x400/4" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/5"><img src="//satyr.io/600x400/5" width="600" height="400" alt="" /></a>
</div>

JavaScript

$(document).ready(function() {

	var $carousel = $('.carousel');

  $carousel
    .slick()
    .magnificPopup({
    mainClass: 'mfp-fade',
      type: 'image',
      delegate: 'a:not(.slick-cloned)',
      gallery: {
        enabled: true
      },
      callbacks: {
        open: function() {
          var current = $carousel.slick('slickCurrentSlide');
          $carousel.magnificPopup('goTo', current);
        },
        beforeClose: function() {
          $carousel.slick('slickGoTo', parseInt(this.index));
        }
      }
		});
});