Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

352
Visualizações
Uncaught Error _.$slides is null Using slick slider and javascript

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();
      });
      
    }
    
  },

};

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda