How to fix Slick Slider in modal window?

Question

css

Basically, I have a button that brings up a modal window. The modal has a slider. With a large screen (more than 560px), under the slider there should be a slider with the option to switch pictures. And with a small screen, there is no slider under. In js I have set:

if ($(window).width() <= '560') {
         arrowsTop = true // Показывать ли стрелки напротив большой картинки
      } else {
         arrowsTop = false
      } // При нажатии на кнопку

      $(window).resize(function() {
         if ($(window).width() <= '560') {
            arrowsTop = true
         } else {
            arrowsTop = false
         }
      }) // При изменении ширины экрана

      $('.popup__slider').slick({
         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, if you first go into the modal, then reduce the screen width, and then go back in, then you get an error:

slick.min.js:1 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)

And the modal itself looks like this:

Thank you.

Answer 1

You need to "reload" the slider when you change the resolution

$(window).on('resize', function() {
    $('.popup__slider').slick('resize');
}