Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

351
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda