Работаю с плагином ArcticModal.js
Мне нужно в модальном окне открывать два слайдера slick, связанные друг с другом (asNavFor). Я использую метод afterOpen и afterClose у arcticModal для того, чтобы инициализировать слайдер и обновлять его после открытия модального окна и после его закрытия соответственно. При загрузке страницы и вызове модального окна оно открывается и все работает, а когда я закрываю модальное окно и вызываю другое, то у меня открывается два модальных окна. Не пойму, что вызывает открытие 2х модальных окон
Без слайдера также открывает по 2 раза
Вот код:
const cardInit = document.querySelectorAll('.js-cardModalInit');
cardInit.forEach(item => {
item.addEventListener('click', () => {
let cardAttr = item.getAttribute('data-card');
let modal = "FOS";
$(function(){
$('.card').arcticmodal({
afterOpen: function() {
$('.slider__cardMain').not('.slick-initialized').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: false,
asNavFor: '.slider__cardAdd'
});
$('.slider__cardAdd').not('.slick-initialized').slick({
slidesToShow: 7,
slidesToScroll: 1,
asNavFor: '.slider__cardMain',
dots: true,
centerMode: true,
focusOnSelect: true
});
},
afterClose: function() {
$('.slider__cardAdd').slick('refresh');
$('.slider__cardMain').slick('refresh');
}
});
if (cardAttr > 0) {
modal = "card";
}
$.ajax({
type: "POST",
url: "blocks/cardModal.php",
data: {
id:cardAttr,
typeForm: modal
},
success: function() {
let modalContainer = document.querySelector('.modal__container');
if (modalContainer.classList.contains('card')) {
modalContainer.classList.remove('card')
}
if (modalContainer.classList.contains('FOS')) {
modalContainer.classList.remove('FOS')
}
$('.modal__container').addClass(modal);
}
})
.done(function( result )
{
$(".modal__container").html(result);
});
})
})})
Вот так отображаются окна, когда я вызываю модальное окно второй или более раз