Ловкие контрольные точки карусели

Question

Это конфигурация, которую я использую для создания пятновой карусели на моей веб-странице.

$('#carousel').slick({ 
         infinite: true, 
         slidesToShow: 3, 
         slidesToScroll: 1, 
         arrows: true, 
         autoplay: true, 
         autoplaySpeed: 2000, 
         responsive: [ 
          { 
           breakpoint: 1200, 
           settings: { 
           slidesToShow: 2, 
           slidesToScroll: 1 
           } 
          }, 
          { 
           breakpoint: 1008, 
           settings: { 
           slidesToShow: 1, 
           slidesToScroll: 1 
           } 
          }, 
          { 
           breakpoint: 800, 
           settings: "unslick" 
          } 

          ] 
      }); 

Это работает так, как это предполагают, чтобы работать за исключением одной вещи, когда я изменить размер моего окна браузера от 1920 ширина до 800 ширина, карусель unslicks и содержимое отображается как нормальные Div-х годов, но тогда, когда Я увеличиваю ширину окна браузера, карусель не воссоздается. Он остается как HTML-блоки без карусели.

Любая помощь будет оценена по достоинству.

Answer 1

unlick - метод деструктора. После того, как вы расстелитесь, вам нужно снова вызвать slick() для создания карусели.

Answer 2

Это один из способов восстановить карусель после unslick убивает его в контрольной точке:

$(window).resize(function() { 
    $('.js-slider').not('.slick-initialized').slick('resize'); 
}); 

$(window).on('orientationchange', function() { 
    $('.js-slider').not('.slick-initialized').slick('resize'); 
});