Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

350
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!