title: Slick Lightbox Won't Open After Swiping on Slider
body: <p>Hey y'all this is my first time posting here, so please let me know if I've asked correctly.</p>
  <p>I have implemented a button that opens up a Slick Lightbox with Slick Slider. The button opens the current slide that is displayed but on mobile, when you swipe the slider and then try to click on the button, the lightbox doesn't open. It looks like the button does get pressed but the action to click the current slide image does not.</p>
  <p>This works on Safari but haven't tested on an actual iOS device so can't say for sure.</p>
  <p>Here is my code:</p>
  <p>HTML</p>
  <pre class="lang-html prettyprint-override"><code>&lt;button id=&quot;open-lightbox&quot;&gt;
    View All
  &lt;/button&gt;
  &lt;div class=&quot;slider&quot;&gt;
    &lt;div class=&quot;slide&quot;&gt;
      &lt;img src=&quot;https://place-hold.it/300x300&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;slide&quot;&gt;
      &lt;img src=&quot;https://place-hold.it/300x300&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;slide&quot;&gt;
       &lt;img src=&quot;https://place-hold.it/300x300&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JS</p>
  <pre class="lang-js prettyprint-override"><code>$('.slider').slick({
      arrows: false,
  });
  
  $('.slider').slickLightbox({
      src: 'src',
      itemSelector: 'img'
  });
  
  $(document).on('click', '#open-lightbox', function(e) {
      e.preventDefault();
    $('.slick-current img').trigger('click');
  });
  </code></pre>
  <p>Here is a jsfiddle: <a href="https://jsfiddle.net/ys1qp09L/50/" rel="nofollow noreferrer">https://jsfiddle.net/ys1qp09L/50/</a></p>
  <p>Code is adapted from this question: <a href="https://stackoverflow.com/questions/62967645/slick-lightbox-open-with-button">Slick Lightbox open with Button</a></p>
  <hr />
  <p><strong>Update - Workaround</strong></p>
  <hr />
  <p>Still haven't found a solution and tried simulating a click by coordinate to click on the current slide but that didn't work either. Probably not the best solution but this works:</p>
  <ol>
  <li>Get all image srcs from the slider excluding clones</li>
  <li>Push the srcs into an array</li>
  <li>Pass the array into the Slick Lightbox settings</li>
  <li>Get the current slide from the main slider</li>
  <li>Move the Slick Lightbox slider to current slide</li>
  </ol>
  <p>Here's the code:</p>
  <pre class="lang-js prettyprint-override"><code>mainSliderIndex = 0
  imgsrc = undefined 
  imgarray = []   
  
  $('.main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
     mainSliderIndex = currentSlide;
  });
  
  $(&quot;.slick-slide:not(.slick-cloned) img&quot;).each(function() {
    imgsrc = this.src;
    imgarray.push(imgsrc);
  });
  
  $(&quot;#open-lightbox&quot;).slickLightbox({
    images: imgarray
    }).on
    'show.slickLightbox': -&gt; 
      $('.slick-lightbox-slick').slick('slickGoTo',mainSliderIndex)
    }
  });
  </code></pre>