How to correctly connect Slick Slider in a modal window?

Question

JavaScript

How to correctly connect Slick Slider in a modal window in jQuery code? Tried:

$('.portfolio__btn_1').on('click', function() {
      $('.portfolio__popup_1').fadeIn(200)
      $('body').addClass('no-scroll')
         
      let arrowsTop

      if ($(window).width() <= '560') { // Адаптация стрелок под мобильные устройства.
         arrowsTop = true // Если ширина экрана больше 560 пикселей, то стрелки переключения появляются.
      } else {
         arrowsTop = false // Если нет, то убираются.
      }

      $(window).resize(function() {
         if ($(window).width() <= '560') { // Тоже самое, что и сверху, только при изменении ширины экрана.
            arrowsTop = true
         } else {
            arrowsTop = false
         }
      })

      $('.popup__slider').slick({ // Подключение Slick Slider
         slidesToShow: 1,
         slidesToScroll: 1,
         arrows: arrowsTop,
         fade: true,
         asNavFor: '.popup__slider_nav'
         });
         $('.popup__slider_nav').slick({
         slidesToShow: 3,
         slidesToScroll: 1,
         asNavFor: '.popup__slider',
         centerMode: true,
         arrows: true,
         focusOnSelect: true
         });
      })
   })

But with this connection there are 2 problems:

• Since I have a lot of modal windows on the site, I will have to connect a slick on each
  
• If you go to the site, click on the button to enable the modal, then change the screen width, and then click on the button again, you will get an error:
  
  Uncaught TypeError: Cannot read property 'add' of null
  at Object.e.initADA (slick.min.js:1)
  at Object.e.init (slick.min.js:1)
  at new (slick.min.js:1)
  at k.fn.init.i.fn.slick (slick.min.js:1)
  at HTMLAnchorElement. (script.js:251)
  at HTMLAnchorElement.dispatch (jquery-3.4.1.min.js:2)
  at HTMLAnchorElement.v.handle (jquery-3.4.1.min.js:2)
  
  Tell me what to do. Thank you.
  

Answer 1

- you need to initialize the slider once, not on every call
- You can collect on each call so that the slider recalculates the position and shows correctly $(".slider").slick('setPosition');
- Disabling the arrows must be done through the breakpoints of the slick itself:

$('.popup__slider').slick({ // Подключение Slick Slider
         slidesToShow: 1,
         slidesToScroll: 1,
         arrows: false,
         fade: true,
         asNavFor: '.popup__slider_nav',
  responsive: [
    {
      breakpoint: 560,
      settings: {
        arrows: true
      }
    }
  ]
         });
      })