Featherlight Slider Fix (flickity)

Getting sliders to work within featherbox modals

by James Connolly

HTML

<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.js"></script>
<link rel="stylesheet" href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.css">
<script src="https://unpkg.com/[email protected]/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flickity.css">
<a href="#test1" class="modal-trigger" data-featherlight>
Open Modal Slider 1
</a>

<a href="#test2" class="modal-trigger" data-featherlight>
Open Modal Slider 2
</a>

<div class="modal-content hide-modal-content " id="test1">
  <h1>Slider 1</h1>
  <div class="gal">
    <div data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
    </div>
    <div data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
     </div>
  </div>
</div>

<div class="modal-content hide-modal-content " id="test2">
  <h1>Slider 2</h1>
  <div class="gal">
    <div data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
    </div>
    <div data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
     </div>
  </div>
</div>

SCSS

.hide-modal-content {
  //display: none;
}

.gal {
  
}

/*
.featherlight:after {
  content:'';
  width: 100%;
  height: 100%;
  position:absolute;
  background: pink;
  left: 0;
  top: 0;
  z-index: 1;
}
*/

.featherlight-content {
  width: 95%;
  height: 95%;
  max-width: 600px;
  z-index: 10;
}

JavaScript

// init slick slider on modal click
$('.modal-content').each(function(index) {
  $(document).on("click", '.modal-trigger', function() {
  //$('.modal-trigger').click(function() {
    
    $('.featherlight').find( '.gal' ).flickity({
    	wrapAround: true,
    });
    
    
  })
});


// unslcik slider when closing modal
//$(document).on("click", '.featherlight', function() {
  //$('.gal').slick('unslick');
//});