yehormalov
@yehormalov
Учусь front-end программированию.

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

Как правильно подключить 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)

    Подскажите что делать. Спасибо.
  • Вопрос задан
  • 38 просмотров
Решения вопроса 2
Get-Web
@Get-Web
Front-End Developer
- инициализировать слайдер нужно один раз, а не при каждом вызове
- При каждом вызоме можно делать сборс, чтобы слайдер пересчитал позицию и показывался корректно $(".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
      }
    }
  ]
         });
      })
Ответ написан
yehormalov
@yehormalov Автор вопроса
Учусь front-end программированию.
Спасибо, стало лучше. В консоле перестало выдавать ошибку. Но теперь при первом нажатии на кнопку вызова модального окна. Видно только стрелки (картинку не видно). Код такой:

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


Спасибо.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
XPOWER Одесса
от 3 000 до 5 500 $
Artezio Москва
от 160 000 до 220 000 ₽
25 февр. 2021, в 11:29
300000 руб./за проект
25 февр. 2021, в 11:23
6000 руб./за проект
25 февр. 2021, в 11:19
7000 руб./за проект