JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="container pt-3 pb-3">
  <div class="row">
    <div class="col">

      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
        Launch Gallery Modal
      </button>

      <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Gallery Modal</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              
              Gallery comes here
 
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary">Save Changes</button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<article id="post" class="d-none">
  <div class="gallery">
    <div class="slider">
      <img src="https://via.placeholder.com/700x300/000000/ffffff" alt="" />
      <img src="https://via.placeholder.com/700x300/ff0000/ffffff" alt="" />
      <img src="https://via.placeholder.com/700x300/0000ff/ffffff" alt="" />
      <img...

SCSS

.slider,
.slider-nav {
  opacity: 0;
  transition: opacity 1s ease;
  
  &.slick-initialized {
    opacity: 1;
    display: block;
  }
}

JavaScript

// global vars
let $slider;
let $sliderNav;

// document ready 
(function($) {

  // load the quick view modal
  $('#modal').on('shown.bs.modal', function() {

    // load the data into modal
    $('.modal-body','#modal').html( $('#post').html() );

    // re init gallery
    galleries();

  }).on('hide.bs.modal', function() {

    // destroy the gallery
    $slider.slick('unslick');
    $sliderNav.slick('unslick');

    // load the data into modal
    $('.modal-body','#modal').empty();

  });

  // product options gallery
  function galleries() {

    // our options product gallery
    let $modal = $('#modal');

    $slider = $('.slider', $modal);
    $sliderNav = $('.slider-nav', $modal);

    // slick product gallery
    $slider.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      infinite: false,
      dots: false,
      fade: true,
      adaptiveHeight: true,
      asNavFor: '#modal .slider-nav'
    });

    // slick product gallery nav
    $sliderNav.slick({
      slidesToShow: 7,
      dots: false,
      arrows: false,
      focusOnSelect: true,
      asNavFor: '#modal .slider'
    });

  }

})(jQuery);