Есть список с карточками. По клику на каждую карточку открывается модальное окно со slick-slider.
Не могу сделать так, чтобы при открытии разных карточек у меня обновлялся слайдер.
Код открытия модального окна:
const popupLinks = document.querySelectorAll('.popup-link');
const body = document.querySelector('body');
const lockPadding = document.querySelectorAll('.lock-padding');
let unlock = true;
const timeout = 600;
if (popupLinks.length > 0) {
for (let index = 0; index < popupLinks.length; index++) {
const popupLink = popupLinks[index];
popupLink.addEventListener('click', function (e) {
const popupName = popupLink.getAttribute('href').replace('#', '');
const currentPopup = document.getElementById(popupName);
popupOpen(currentPopup);
e.preventDefault();
});
}
}
const popupCloseIcon = document.querySelectorAll('.close-popup');
if (popupCloseIcon.length > 0) {
for (let index = 0; index < popupCloseIcon.length; index++) {
const el = popupCloseIcon[index];
el.addEventListener('click', function(e) {
popupClose(el.closest('.popup'));
e.preventDefault();
});
}
}
function popupOpen(currentPopup) {
$.ajax({
type: "POST",
url: "blocks/popup.php"
}).done(function (result) {
$("#popupWRAPPER").html(result);
// $('.portfolio__slider1').slick('refresh');
// $('.portfolio__slider2').slick('refresh');
});
if (currentPopup && unlock) {
const popupActive = document.querySelector('.popup.open');
if (popupActive) {
popupClose(popupActive, false);
} else {
bodyLock();
}
currentPopup.classList.add('open');
currentPopup.addEventListener('click', function (e) {
if (!e.target.closest('.popup__body')) {
popupClose(e.target.closest('.popup'));
}
});
}
}
function bodyUnLock() {
setTimeout(function () {
if (lockPadding.length > 0) {
for (let index = 0; index < lockPadding.length; index++) {
const el = lockPadding[index];
el.style.paddingRight = '0px';
}
}
body.style.paddingRight = '0px';
body.classList.remove('lock');
}, timeout);
unlock = false;
setTimeout(function () {
unlock = true;
}, timeout);
}
function popupClose(popupActive, doUnlock = true) {
if (unlock) {
popupActive.classList.remove('open');
if (doUnlock) {
bodyUnLock();
}
}
}
function bodyLock () {
const lockPaddingValue = window.innerWidth - document.querySelector('.wrapper').offsetWidth + 'px';
if (lockPadding.length > 0) {
for (let index = 0; index < lockPadding.length; index++) {
const el = lockPadding[index];
el.style.paddingRight = lockPaddingValue;
}
}
body.style.paddingRight = lockPaddingValue;
body.classList.add('lock');
unlock = false;
setTimeout(function () {
unlock = true;
}, timeout);
}
document.addEventListener('keydown', function (e) {
if (e.which === 27) {
const popupActive = document.querySelector('.popup.open');
popupClose(popupActive);
}
});
В функции popupOpen загружаю ajax. В самом файле popup.php я заново подгружаю jquery (через cdn) и файл slick.min.js.
По итогу у меня просто грузит много раз slick.min.js и саму jqeury. Что кто подсказать может?