S
S
Sergey Margelov2018-10-16 01:55:35
JavaScript
Sergey Margelov, 2018-10-16 01:55:35

How to make slick-slider fire on page resize?

Good afternoon.
There is a page with three sliders on it. All sliders are made on slick. One of them works at all resolutions (it's fine), and the other two should only be enabled on mobile (480px and below). They work. Only there is a problem. If you resize the page up, then these two sliders are disabled and the slides line up in the blocks I need, but if you reduce the window, only css changes work, but the slider does not turn on. You have to reload the page for it to work.
Page with the problem
I will even accept a crutch solution, although ideally I would like to understand it in detail.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
P
ProjectSoft, 2018-10-16
@smargelov

// Подпишемся на ресайз и продиспатчим его для запуска
$(window).on('resize', function(e){
  // Переменная, по которой узнаем запущен слайдер или нет.
  // Храним её в data
  var init = $(".card-box").data('init-slider');
  // Если мобильный
  if(window.innerWidth < 480){
    // Если слайдер не запущен
    if(init != 1){
      // Запускаем слайдер и записываем в data init-slider = 1
      $('#card-box').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
      }).data({'init-slider': 1});
    }
  }
  // Если десктоп
  else {
    // Если слайдер запущен
    if(init == 1){
      // Разрушаем слайдер и записываем в data init-slider = 0
      $('#card-box').slick('unslick').data({'init-slider': 0});
    }
  }
}).trigger('resize');

https://monosnap.com/file/Jw6PomDPOuv54bY25640JxAz...

A
akavato, 2018-10-16
@akavato

You need to reinitialize the slick if unslick was used before. Something like that probably.

addDomListener(window, 'resize', function () {
    if (условие) {
    $('.your-class').slick({
    setting-name: setting-value
  });
}
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question