현재 slick를 가지고 이미지 슬라이더를 만들고 있습니다

한줄에 4장의 이미지가 나오는 슬라이더까지는 완성했는데

반응형으로 구현할려고 하는데 감을 못잡겠어요 ㅠ 
 

아래는 코드문인데 중간사이즈는 이미지 3장이 나오고
모바일에서는 1장만 나오도록 변경이 가능할까요?
고수님들 확인 부탁드립니다~

<script>

$(function(){
    $('.main_slide').slick({
      dots: true,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 4,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
      ]
    });
})

</script>