Почему Slick показывает больше чем нужно, не адаптируется и вообще не реагирует на ширину окна и дает скролл?

$('.product__list').slick({ 
  slidesToShow: 4, 
  slidesToScroll: 1, 
  variableWidth: true, 
  adaptiveHeight: true, 
  nextArrow: '<button type="button" class="product-next">&nbsp;</button>', 
  prevArrow: '<button type="button" class="product-prev">&nbsp;</button>', 
   responsive: [ 
    { 
      breakpoint: 800, 
      settings: { 
        slidesToShow: 3, 
        slidesToScroll: 1 
      } 
    }, 
    { 
      breakpoint: 500, 
      settings: { 
        slidesToShow: 2, 
        slidesToScroll: 1 
      } 
    } 
  ] 
 
});