Photoswipe does not close properly in this implementation [with Slick Carousel]

[davidtgq]

I'm experiencing a problem that seems to be reproduced randomly after closing Photoswipe when there is more than one image in the Slick carousel. Visually, the effect is that Photoswipe closes (disappears without any animation), then the right side of the page changes again to black with last photo viewed in Photoswipe visible, then the black background fades to transparent but seems to be still there (it prevents any buttons from being clicked).

In case it's relevant, the Photoswipe open animation don't behave like the demos either - it doesn't zoom in from the thumbnail, it just simply fades in from the center of the page.

Image of the page after problem occurs: https://i.imgur.com/a4XEMxU.png

Here is my implementation using Slick and Photoswipe together:

  var carousel = $('#sc');
  var pswpImages = [];
  var options = {
    history: false
  };
  var count = 0;
  for (var fn in data.images) {
    var pieces = fn.split('.');
    var fullsize = meta_data['media'] + fn;
    var thumbnail = meta_data['cache'] + pieces[0] + '_m.' + pieces[1];
    carousel.append('<div><img src="' + thumbnail + '" class="sc" data-id="' + count + '"></div>');
    count += 1;
    $('.sc').each(function () {
      $(this).on('click', function () {
        options.index = $(this).data('id');
        var pswpElement = document.querySelectorAll('.pswp')[0];
        var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, pswpImages, options);
        gallery.init();
      })
    });
    pswpImages.push({
      src: fullsize,
      msrc: thumbnail,
      w: data.images[fn]['x'],
      h: data.images[fn]['y']
    });
  }
  // TODO: When closing gallery, get image number, and slick.GoTo that slide
  carousel.slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    variableWidth: true,
    centerMode: true
  });

[Ericzhiluo]

I encountered similar problem when using photoswipe with swiper.js

[Ciapss-zz]

I had a similar problem with Slick too... And the only fix I figured out for now is use this timeout function in "unbindEvents" listener:

setTimeout(function() {
    if ($('.pswp--open').length)
        gallery.destroy();
}, 500);