Как применить часть JS-команд только на мобильных устройствах?

    
    
$('.main-image-nav').on('setPosition beforeChange', function(event, slick, currentSlide, nextSlide){
  const slideCount = slick.slideCount;
  const zIndex = slick.options.zIndex;
  const slides = slick.$slides.filter(slideIndex => event.type === 'beforeChange' ? nextSlide !== slideIndex : slick.currentSlide !== slideIndex);
  const maxOffset = 80;
  
  slides.each(function(index, item) {
    const slideNum = index + 1;
    const slide = $(item);
    $(item).css({
      'transform': `translateY(${-maxOffset / slideCount * slideNum}px) scale(${1 - 0.1 * slideNum})`,
      zIndex: slideCount - index
    });
  })
}).slick({
    speed: 500,
    fade: true,
    cssEase: 'linear',
    zIndex: false,
    dots: true,
    arrows: true,
    slidesToShow:  true,
    slidesToScroll: 1,
    vertical: false,
    infinite: true,
    focusOnSelect: true,
    responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: true,
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow:1,
        slidesToScroll: 1,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        vertical: false,
        verticalSwiping: false,
      }
    }
  ]
});

.main-image-nav{
  width: 600px;
  margin: 100px auto;
}
.main-image-nav .slick-list {
  overflow: visible;
  padding: 56.7% 0 0;
}
.main-image-nav .s2 {
  background: red;
}
.main-image-nav .s1 {
  background: blue !important;
}
.slide {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
}
.main-image-nav .slick-track {
  max-width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.main-image-nav .slick-slide {
  position: absolute !important;
  border-radius: 20px;
  overflow: hidden;
  left: 0 !important;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1 !important;
  transform-origin: 50% 0;
  transition: transform 0.5s linear !important;
}
.main-image-nav .slick-slide.slick-current {
  transform: translate(0) scale(1) !important;
  z-index: 99 !important;
}
.main-image-navimg {
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>

<div class="main-image-nav">

   <div class="slide s1">1</div>
   <div class="slide s2">2</div>
   <div class="slide s1">3</div>
   <div class="slide s2">4</div>
   <div class="slide s1">5</div>
   <div class="slide s2">6</div>
   
</div>










<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>