Slick Carousel - Изображения, застрявшие по вертикали при просмотре внутри модальной вкладки / окна

Question

Я использую Slick Carousel с модальным контентом.Все работает хорошо, но при попытке перехода от одного проекта к другому с обработчиками prev / next внутри открытой вкладки / окна.Изображения застряли вертикальномодальное окно.Без 'unslick', карусель не загружается должным образом (иногда показывает быстро, иногда требуется немного, чтобы показать слайдеры).

Спасибо.

Answer 1

Вам необходимо заменить

 $('.carousel').slick(...)

на

$('.carousel', this).slick(...)

, который будет нацелен только на .carousel внутри вашего текущего модального режима, на который ссылается this в обратном вызове открытия.,

Кроме того, было бы неплохо уничтожить пятно на модальном close, а не на closed (его лучше уничтожать, когда модал закрыт, а не после того, как он был закрыт).Если он уничтожается слишком рано, оставьте его на closed.

---

Обратите внимание, что у вас есть серьезные проблемы с разметкой (т. Е. Атрибуты вашей ссылки src не закрыты).Возможно, вы захотите запустить свой код через средство проверки HTML, пока не исправите все проблемы проверки.

После этого должно работать следующее:

$(document).on('open.zf.reveal', '[data-reveal]', function () {
  $('.carousel', this).slick({
    autoplay: true,
    infinite: true,
    arrows:true,
    nextArrow: '<i class="fas fa-caret-right"></i',
    prevArrow: '<i class="fas fa-caret-left"></i',
    autoplaySpeed: 3000,
    speed: 1500,
    slidesToShow: 2,
    slidesToScroll:1  
  });
}).on('close.zf.reveal', '[data-reveal]', function () {
  $('.carousel', this).slick('unslick');
});