slick slider мобильная версия

как сделать, чтобы при разрешении 480 в main-slider добавить arrows? если делаю так то все зависает и не подгружает фото

 responsive: [
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: true
          }
        }
 ]

Инициализация слайдера

$('.main-slider').slick({
     infinite: true,
     slidesToShow: 1,
     slidesToScroll: 1,
     initialSlide: 0,
     arrows: false,
     asNavFor: '.thumb-slider',
 });
$('.thumb-slider').slick({
     infinite: true,
     slidesToShow: 4,
     slidesToScroll: 1,
     focusOnSelect: true,
     arrows: true,
     nextArrow: '<span class="arrow-next" id="arrow-next"></span>',
     prevArrow: '<span class="arrow-prev"></span>',
     asNavFor: '.main-slider',
     centerMode: false,
     vertical: true,
     responsive: [
    {
      breakpoint: 1600,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
      }
    },
    {
      breakpoint: 992,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      }
    }
  ]
 });