Как правильно подключить Slick Slider в модальном окне?

Question

[Егор Мальований]

Как правильно подключить Slick Slider в модальном окне в JQuery код? Пробовал:

$('.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
         });
      })
   })

Но при таком подключении есть 2 проблемы:

• Так как у меня много модальных окон на сайте придётся подключать слик на каждом
  
• Если зайти на сайт нажать на кнопку включения модалки, затем изменить ширину экрана, а потом опять нажать на кнопку выбьет ошибку:
  
  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)
  
  Подскажите что делать. Спасибо.
  

Answer 1

[Виталий Першин]

- инициализировать слайдер нужно один раз, а не при каждом вызове
- При каждом вызоме можно делать сборс, чтобы слайдер пересчитал позицию и показывался корректно $(".slider").slick('setPosition');
- Отключение стрелок нужно делать через брекпоинты самого слик:

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

Answer 2

[Егор Мальований]

Спасибо, стало лучше. В консоле перестало выдавать ошибку. Но теперь при первом нажатии на кнопку вызова модального окна. Видно только стрелки (картинку не видно). Код такой:

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

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

Спасибо.

Comments

[Виталий Першин]

Вот тут как раз и надо применить ('setPosition')

$('.portfolio__btn_1').on('click', function() {
      $('.portfolio__popup_1').fadeIn(200);
      $('body').addClass('no-scroll');
$(".popup__slider").slick('setPosition');
      })
   })

Если все остальное работает корректно, то должно заработать, но такие вопросы нужно задавать со своим кодом в песочнице https://jsfiddle.net/ и не отвечать на свой вопрос, а дополнять или писать в комментарии к ответам.

[Егор Мальований]

Виталий, Спасибо больше, все заработало!