I'm getting this error ( _.$slides is null) while clicking on a photos gallery. I have a page with several galleries, while clicking it has to open a modal with photos inside (I'm using Slick slider). It works perfectly on the first click but as soon as I close the modal and try to open another gallery, it breaks. Slick is not loaded (I think) and photos aren't displayed properly. Please is there anyone who could give me a hand ?
import 'slick-carousel'
export default {
init() {
this.listenClickGallery();
this.closeModal();
},
closeModal() {
const modalWindow = document.querySelector('.slider__mobile__closing__item');
// Close modal wherever the user clicks
modalWindow.addEventListener("click", (e) => {
// if (e.target == modalWindow) {
document.getElementById("modal").classList.add('hidden')
// }
});
},
slickReady() {
var iconPrev = '/app/themes/onlyweb/public/images/assets/svg/pistolet-galerie-prev.svg';
var iconNext = '/app/themes/onlyweb/public/images/assets/svg/pistolet-galerie-next.svg';
$('.slider-container').slick({
infinite: true,
speed: 500,
cssEase: 'linear',
arrows: true,
prevArrow: '<img src="'+iconPrev+'">',
nextArrow: '<img src="'+iconNext+'">'
});
},
listenClickGallery() {
// init variables
var images = document.querySelectorAll('#toAddInModal .slider-image');
var modalImageContainer = document.querySelector('.slider-container');
var modalImageElement = document.querySelector('.slider-image--modal');
var self = this;
// loop images => to get urls
for (var i = 0; i < images.length; i++) {
// for each image listen click
images[i].addEventListener("click", function () {
// clear container
modalImageContainer.innerHTML = '';
// show modal
document.querySelector("#modal").classList.remove('hidden');
// Get urls (display gallery items)
var urls = this.querySelectorAll('.gallery-url');
// loop on urls to clone div .slider-image and url bck image
for (var k = 0; k < urls.length; k++) {
var currentUrl = urls[k].innerText;
var modalImageElementCloned = modalImageElement.cloneNode(true);
modalImageElementCloned.style = '';
modalImageElementCloned.style = 'background-image: ' + 'url("' + currentUrl + '")';
modalImageContainer.appendChild(modalImageElementCloned);
}
self.slickReady();
});
}
},
};